<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>珠峰架构师成长计划</title>
    <link rel="stylesheet" type="text/css" href="../static/css/main.css">
</head>
<body>
<div class="nav">
    <div class="logo">
        
            珠峰架构师成长计划
        
    </div>
<ul><li><a href="../index.html">0.Async</a></li><li><a href="../html/0.editor.html">0.editor</a></li><li><a href="../html/0.module.html">0.module</a></li><li><a href="../html/1.ES2015.html">1.ES2015</a></li><li><a href="../html/2.Promise.html">2.Promise</a></li><li><a href="../html/3.Node.html">3.Node</a></li><li><a href="../html/4.NodeInstall.html">4.NodeInstall</a></li><li><a href="../html/5.REPL.html">5.REPL</a></li><li><a href="../html/6.NodeCore.html">6.NodeCore</a></li><li><a href="../html/7.module&NPM.html">7.module&NPM</a></li><li><a href="../html/8.Encoding.html">8.Encoding</a></li><li><a href="../html/9.Buffer.html">9.Buffer</a></li><li><a href="../html/10.fs.html">10.fs</a></li><li><a href="../html/11.Stream-1.html">11.Stream-1</a></li><li><a href="../html/11.Stream-2.html">11.Stream-2</a></li><li><a href="../html/11.Stream-3.html">11.Stream-3</a></li><li><a href="../html/11.Stream-4.html">11.Stream-4</a></li><li><a href="../html/12-Network-2.html">12-Network-2</a></li><li><a href="../html/12.NetWork-3.html">12.NetWork-3</a></li><li><a href="../html/12.Network-1.html">12.Network-1</a></li><li><a href="../html/13.tcp.html">13.tcp</a></li><li><a href="../html/14.http-1.html">14.http-1</a></li><li><a href="../html/14.http-2.html">14.http-2</a></li><li><a href="../html/15.compress.html">15.compress</a></li><li><a href="../html/16.crypto.html">16.crypto</a></li><li><a href="../html/17.process.html">17.process</a></li><li><a href="../html/18.yargs.html">18.yargs</a></li><li><a href="../html/19.cache.html">19.cache</a></li><li><a href="../html/20.action.html">20.action</a></li><li><a href="../html/21.https.html">21.https</a></li><li><a href="../html/22.cookie.html">22.cookie</a></li><li><a href="../html/23.session.html">23.session</a></li><li><a href="../html/24.express-1.html">24.express-1</a></li><li><a href="../html/24.express-2.html">24.express-2</a></li><li><a href="../html/24.express-3.html">24.express-3</a></li><li><a href="../html/24.express-4.html">24.express-4</a></li><li><a href="../html/25.koa-1.html">25.koa-1</a></li><li><a href="../html/26.webpack-1-basic.html">26.webpack-1-basic</a></li><li><a href="../html/26.webpack-2-optimize.html">26.webpack-2-optimize</a></li><li><a href="../html/26.webpack-3.tapable.html">26.webpack-3.tapable</a></li><li><a href="../html/26.webpack-4-AST.html">26.webpack-4-AST</a></li><li><a href="../html/26.webpack-5-source.html">26.webpack-5-source</a></li><li><a href="../html/26.webpack-6-loader.html">26.webpack-6-loader</a></li><li><a href="../html/26.webpack-7-plugin.html">26.webpack-7-plugin</a></li><li><a href="../html/26.webpack-8-hand.html">26.webpack-8-hand</a></li><li><a href="../html/27.react-1.html">27.react-1</a></li><li><a href="../html/27.react-2.html">27.react-2</a></li><li><a href="../html/27.react-3.html">27.react-3</a></li><li><a href="../html/27.react-4-immutable.html">27.react-4-immutable</a></li><li><a href="../html/27.react-5-react-dom-diff.html">27.react-5-react-dom-diff</a></li><li><a href="../html/27.react-6.html">27.react-6</a></li><li><a href="../html/28.react-mobx.html">28.react-mobx</a></li><li><a href="../html/28.redux-0.html">28.redux-0</a></li><li><a href="../html/28.redux-1.html">28.redux-1</a></li><li><a href="../html/28.redux-2-中间件.html">28.redux-2-中间件</a></li><li><a href="../html/28.redux-3-saga.html">28.redux-3-saga</a></li><li><a href="../html/28.redux-jwt-back.html">28.redux-jwt-back</a></li><li><a href="../html/28.redux-jwt-front.html">28.redux-jwt-front</a></li><li><a href="../html/29.mongodb-1.html">29.mongodb-1</a></li><li><a href="../html/29.mongodb-2.html">29.mongodb-2</a></li><li><a href="../html/29.mongodb-3.html">29.mongodb-3</a></li><li><a href="../html/29.mongodb-4.html">29.mongodb-4</a></li><li><a href="../html/29.mongodb-5.html">29.mongodb-5</a></li><li><a href="../html/29.mongodb-6.html">29.mongodb-6</a></li><li><a href="../html/30.cms-1-mysql.html">30.cms-1-mysql</a></li><li><a href="../html/30.cms-2-mysql.html">30.cms-2-mysql</a></li><li><a href="../html/30.cms-3-mysql.html">30.cms-3-mysql</a></li><li><a href="../html/30.cms-4-egg.html">30.cms-4-egg</a></li><li><a href="../html/30.cms-5-api.html">30.cms-5-api</a></li><li><a href="../html/30.cms-6-roadhog.html">30.cms-6-roadhog</a></li><li><a href="../html/30.cms-7-umi.html">30.cms-7-umi</a></li><li><a href="../html/30.cms-8-dva.html">30.cms-8-dva</a></li><li><a href="../html/30.cms-9-dva.html">30.cms-9-dva</a></li><li><a href="../html/30.cms-10-front.html">30.cms-10-front</a></li><li><a href="../html/30.cms-11-deploy.html">30.cms-11-deploy</a></li><li><a href="../html/33.redis.html">33.redis</a></li><li><a href="../html/34.unittest.html">34.unittest</a></li><li><a href="../html/35.jwt.html">35.jwt</a></li><li><a href="../html/36.websocket-1.html">36.websocket-1</a></li><li><a href="../html/36.websocket-2.html">36.websocket-2</a></li><li><a href="../html/38.chat-api-1.html">38.chat-api-1</a></li><li><a href="../html/38.chat-api-2.html">38.chat-api-2</a></li><li><a href="../html/38.chat-3.html">38.chat-3</a></li><li><a href="../html/38.chat-api-3.html">38.chat-api-3</a></li><li><a href="../html/38.chat.html">38.chat</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/39.crawl-0.html">39.crawl-0</a></li><li><a href="../html/39.crawl-1.html">39.crawl-1</a></li><li><a href="../html/39.crawl-2.html">39.crawl-2</a></li><li><a href="../html/40.deploy.html">40.deploy</a></li><li><a href="../html/41.safe.html">41.safe</a></li><li><a href="../html/42.test.html">42.test</a></li><li><a href="../html/43.nginx.html">43.nginx</a></li><li><a href="../html/44.enzyme.html">44.enzyme</a></li><li><a href="../html/45.docker.html">45.docker</a></li><li><a href="../html/46.elastic.html">46.elastic</a></li><li><a href="../html/47.oauth.html">47.oauth</a></li><li><a href="../html/48.wxpay.html">48.wxpay</a></li><li><a href="../html/49.nunjucks.html">49.nunjucks</a></li><li><a href="../html/50.ketang.html">50.ketang</a></li><li><a href="../html/index.html">index</a></li><li><a href="../html/51.typescript.html">51.typescript</a></li><li><a href="../html/52.UML.html">52.UML</a></li><li><a href="../html/53.design.html">53.design</a></li><li><a href="../html/index.html">index</a></li><li><a href="../html/54.linux.html">54.linux</a></li><li><a href="../html/55.yaml.html">55.yaml</a></li><li class="active"><a href="../html/50.ketang2.html">50.ketang2</a></li><li><a href="../html/56.ts.html">56.ts</a></li><li><a href="../html/57.ts_react.html">57.ts_react</a></li><li><a href="../html/58.react-ssr.html">58.react-ssr</a></li><li><a href="../html/59.react-ssr.html">59.react-ssr</a></li></ul></div>


<div class="warpper">

    <div class="page-toc">
        <ul><li><a href="#t01. 项目说明">1. 项目说明</a></li><li><a href="#t11.1 项目目录结构">1.1 项目目录结构</a></li><li><a href="#t21.2 存入Redux">1.2 存入Redux</a></li><li><a href="#t31.3 样式">1.3 样式</a></li><li><a href="#t42.首页导航">2.首页导航</a><ul><li><a href="#t52.1 src/index.html">2.1 src/index.html</a></li><li><a href="#t62.2 src/index.tsx">2.2 src/index.tsx</a></li><li><a href="#t72.3 webpack.config.js">2.3 webpack.config.js</a></li><li><a href="#t82.4 common/common.less">2.4 common/common.less</a></li><li><a href="#t92.5 containers/App.tsx">2.5 containers/App.tsx</a></li><li><a href="#t102.6 Tab/index.tsx">2.6 Tab/index.tsx</a></li><li><a href="#t112.7 Tab/index.less">2.7 Tab/index.less</a></li><li><a href="#t122.8 Home/index.tsx">2.8 Home/index.tsx</a></li><li><a href="#t132.9 Lesson/index.tsx">2.9 Lesson/index.tsx</a></li><li><a href="#t142.10 Profile/index.tsx">2.10 Profile/index.tsx</a></li></ul></li><li><a href="#t153. 首页头部动画">3. 首页头部动画</a><ul><li><a href="#t163.1 types/index.tsx">3.1 types/index.tsx</a></li><li><a href="#t173.2 webpack.config.js">3.2 webpack.config.js</a></li><li><a href="#t183.3 HomeHeader/index.tsx">3.3 HomeHeader/index.tsx</a></li><li><a href="#t193.4 HomeHeader/index.less">3.4 HomeHeader/index.less</a></li></ul></li><li><a href="#t204.当前分类存入redux">4.当前分类存入redux</a><ul><li><a href="#t214.1 HomeHeader/index.tsx">4.1 HomeHeader/index.tsx</a></li><li><a href="#t224.2 Home/index.tsx">4.2 Home/index.tsx</a></li><li><a href="#t234.3 store/action-types.tsx">4.3 store/action-types.tsx</a></li><li><a href="#t244.4 reducers/index.tsx">4.4 reducers/index.tsx</a></li><li><a href="#t254.5 types/index.tsx">4.5 types/index.tsx</a></li><li><a href="#t264.6 actions/home.tsx">4.6 actions/home.tsx</a></li><li><a href="#t274.7 reducers/home.tsx">4.7 reducers/home.tsx</a></li></ul></li><li><a href="#t285. 轮播图">5. 轮播图</a><ul><li><a href="#t295.1 HomeSwiper/index.tsx">5.1 HomeSwiper/index.tsx</a></li><li><a href="#t305.2 HomeSwiper/index.less">5.2 HomeSwiper/index.less</a></li><li><a href="#t315.3 server/app.js">5.3 server/app.js</a></li><li><a href="#t325.4 src/api/index.tsx">5.4 src/api/index.tsx</a></li><li><a href="#t335.5 api/home.tsx">5.5 api/home.tsx</a></li><li><a href="#t345.6 server/app.js">5.6 server/app.js</a></li><li><a href="#t355.7 server/mock/sliders.js">5.7 server/mock/sliders.js</a></li></ul></li><li><a href="#t366. 课程列表">6. 课程列表</a><ul><li><a href="#t376.1 server/app.js">6.1 server/app.js</a></li><li><a href="#t386.2 mock/lessons.js">6.2 mock/lessons.js</a></li><li><a href="#t396.3 api/home.tsx">6.3 api/home.tsx</a></li><li><a href="#t406.4 HomeHeader/index.tsx">6.4 HomeHeader/index.tsx</a></li><li><a href="#t416.5 Home/index.tsx">6.5 Home/index.tsx</a></li><li><a href="#t426.6 store/action-types.tsx">6.6 store/action-types.tsx</a></li><li><a href="#t436.7 actions/home.tsx">6.7 actions/home.tsx</a></li><li><a href="#t446.8 reducers/home.tsx">6.8 reducers/home.tsx</a></li><li><a href="#t456.9 types/index.tsx">6.9 types/index.tsx</a></li><li><a href="#t466.10 Loading/index.tsx">6.10 Loading/index.tsx</a></li><li><a href="#t476.11 HomeLessons/index.tsx">6.11 HomeLessons/index.tsx</a></li><li><a href="#t486.12 HomeLessons/index.less">6.12 HomeLessons/index.less</a></li></ul></li><li><a href="#t497. 加载更多">7. 加载更多</a><ul><li><a href="#t507.1 server/app.js">7.1 server/app.js</a></li><li><a href="#t517.2 Loading/index.less">7.2 Loading/index.less</a></li><li><a href="#t527.3 Loading/index.tsx">7.3 Loading/index.tsx</a></li><li><a href="#t537.4 HomeLessons/index.tsx">7.4 HomeLessons/index.tsx</a></li><li><a href="#t547.5 Home/index.tsx">7.5 Home/index.tsx</a></li><li><a href="#t557.6 store/action-types.tsx">7.6 store/action-types.tsx</a></li><li><a href="#t567.7 actions/home.tsx">7.7 actions/home.tsx</a></li><li><a href="#t577.8 reducers/home.tsx">7.8 reducers/home.tsx</a></li><li><a href="#t587.9 HomeHeader/index.tsx">7.9 HomeHeader/index.tsx</a></li><li><a href="#t597.10">7.10</a></li><li><a href="#t607.11 HomeSwiper/index.tsx">7.11 HomeSwiper/index.tsx</a></li></ul></li><li><a href="#t618. 上拉加载">8. 上拉加载</a><ul><li><a href="#t628.1 Home/index.tsx">8.1 Home/index.tsx</a></li><li><a href="#t638.2 src/utils.tsx">8.2 src/utils.tsx</a></li></ul></li><li><a href="#t649. 课程详情">9. 课程详情</a><ul><li><a href="#t659.1 src/index.tsx">9.1 src/index.tsx</a></li><li><a href="#t669.2 NavHeader/index.tsx">9.2 NavHeader/index.tsx</a></li><li><a href="#t679.3 NavHeader/index.less">9.3 NavHeader/index.less</a></li><li><a href="#t689.4 Detail/index.tsx">9.4 Detail/index.tsx</a></li><li><a href="#t699.5 Detail/index.less">9.5 Detail/index.less</a></li></ul></li><li><a href="#t7010. 记住滚动条位置">10. 记住滚动条位置</a><ul><li><a href="#t7110.1 Home/index.tsx">10.1 Home/index.tsx</a></li><li><a href="#t7210.2 src/utils.tsx">10.2 src/utils.tsx</a></li></ul></li><li><a href="#t7311. 个人中心">11. 个人中心</a><ul><li><a href="#t7411.1 Profile/index.tsx">11.1 Profile/index.tsx</a></li><li><a href="#t7511.2 Profile/index.less">11.2 Profile/index.less</a></li></ul></li><li><a href="#t7612.登录">12.登录</a><ul><li><a href="#t7712.1 src/index.tsx">12.1 src/index.tsx</a></li><li><a href="#t7812.2 Login/index.tsx">12.2 Login/index.tsx</a></li><li><a href="#t7912.3 Login/index.less">12.3 Login/index.less</a></li></ul></li><li><a href="#t8013.注册">13.注册</a><ul><li><a href="#t8113.1 src/index.tsx">13.1 src/index.tsx</a></li><li><a href="#t8213.2 Reg/index.tsx">13.2 Reg/index.tsx</a></li><li><a href="#t8313.3 Reg/index.less">13.3 Reg/index.less</a></li></ul></li><li><a href="#t8414. 实现会话">14. 实现会话</a><ul><li><a href="#t8514.1 server/app.js">14.1 server/app.js</a></li><li><a href="#t8614.2 src/api/index.tsx">14.2 src/api/index.tsx</a></li><li><a href="#t8714.3 Login/index.tsx">14.3 Login/index.tsx</a></li><li><a href="#t8814.4 Profile/index.tsx">14.4 Profile/index.tsx</a></li><li><a href="#t8914.5 Reg/index.tsx">14.5 Reg/index.tsx</a></li><li><a href="#t9014.6 action-types.tsx">14.6 action-types.tsx</a></li><li><a href="#t9114.7 reducers/index.tsx">14.7 reducers/index.tsx</a></li><li><a href="#t9214.8 types/index.tsx">14.8 types/index.tsx</a></li><li><a href="#t9314.9 api/session.tsx">14.9 api/session.tsx</a></li><li><a href="#t9414.10 actions/session.tsx">14.10 actions/session.tsx</a></li><li><a href="#t9514.11 reducers/session.tsx">14.11 reducers/session.tsx</a></li></ul></li><li><a href="#t9615. 受保护路由">15. 受保护路由</a><ul><li><a href="#t9715.1 PrivateRoute/index.tsx">15.1 PrivateRoute/index.tsx</a></li><li><a href="#t9815.2 src/index.tsx">15.2 src/index.tsx</a></li></ul></li><li><a href="#t99参考">参考</a></li></ul>
    </div>
    
    <div class="content markdown-body">
        <h2 id="t01. &#x9879;&#x76EE;&#x8BF4;&#x660E;">1. &#x9879;&#x76EE;&#x8BF4;&#x660E; <a href="#t01. &#x9879;&#x76EE;&#x8BF4;&#x660E;"> # </a></h2>
<h2 id="t11.1 &#x9879;&#x76EE;&#x76EE;&#x5F55;&#x7ED3;&#x6784;">1.1 &#x9879;&#x76EE;&#x76EE;&#x5F55;&#x7ED3;&#x6784; <a href="#t11.1 &#x9879;&#x76EE;&#x76EE;&#x5F55;&#x7ED3;&#x6784;"> # </a></h2>
<ul>
<li>src &#x9879;&#x76EE;&#x6E90;&#x7801;&#x76EE;&#x5F55;</li>
<li>index.js &#x5165;&#x53E3;&#x6587;&#x4EF6;</li>
<li>containers &#x5BB9;&#x5668;</li>
<li>components &#x7EC4;&#x4EF6;</li>
<li>common &#x516C;&#x5171;&#x6837;&#x5F0F;<h2 id="t21.2 &#x5B58;&#x5165;Redux">1.2 &#x5B58;&#x5165;Redux <a href="#t21.2 &#x5B58;&#x5165;Redux"> # </a></h2>
</li>
<li>&#x7F16;&#x5199;&#x670D;&#x52A1;&#x7AEF;&#x63A5;&#x53E3;</li>
<li>&#x7528;fetch&#x83B7;&#x53D6;&#x63A5;&#x53E3;&#x65B9;&#x6CD5;</li>
<li>&#x901A;&#x8FC7;action&#x5C06;&#x83B7;&#x53D6;&#x7684;&#x6570;&#x636E;&#x53D1;&#x9001;&#x5230;reducer</li>
<li>&#x901A;&#x8FC7;reducer&#x6539;&#x53D8;redux&#x4E2D;&#x7684;&#x72B6;&#x6001;</li>
</ul>
<h2 id="t31.3 &#x6837;&#x5F0F;">1.3 &#x6837;&#x5F0F; <a href="#t31.3 &#x6837;&#x5F0F;"> # </a></h2>
<p><a href="http://at.alicdn.com/t/font_pgg5jafnob51m7vi.css">&#x8D44;&#x6E90;&#x94FE;&#x63A5;</a></p>
<ul>
<li>.icon-uilist</li>
<li>.icon-xiaolian</li>
<li>.icon-xiugaimima</li>
<li>.icon-book</li>
<li>.icon-fanhui</li>
<li>.icon-guanbi</li>
<li>.icon-guanyuwomen</li>
<li>.icon-jianjie</li>
<li>.icon-renturn</li>
<li>.icon-xingqiu</li>
<li>.icon-kecheng-copy</li>
<li>.icon-common-changjianwenti-copy</li>
<li>.icon-react</li>
</ul>
<p><img src="http://img.zhufengpeixun.cn/iconfont.png" alt="iconfont"></p>
<h2 id="t42.&#x9996;&#x9875;&#x5BFC;&#x822A;">2.&#x9996;&#x9875;&#x5BFC;&#x822A; <a href="#t42.&#x9996;&#x9875;&#x5BFC;&#x822A;"> # </a></h2>
<h3 id="t52.1 src/index.html">2.1 src/index.html <a href="#t52.1 src/index.html"> # </a></h3>
<pre><code class="lang-diff"><span class="hljs-addition">+ &lt;link rel=&quot;stylesheet&quot; href=&quot;http://at.alicdn.com/t/font_pgg5jafnob51m7vi.css&quot;&gt;</span>
</code></pre>
<h3 id="t62.2 src/index.tsx">2.2 src/index.tsx <a href="#t62.2 src/index.tsx"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-dom&apos;</span>;
<span class="hljs-keyword">import</span> Home <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./components/Home&apos;</span>;
<span class="hljs-keyword">import</span> Lesson <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./components/Lesson&apos;</span>;
<span class="hljs-keyword">import</span> Profile <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./components/Profile&apos;</span>;
<span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./containers/App&apos;</span>;
<span class="hljs-keyword">import</span> { Provider } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-redux&apos;</span>;
<span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./store&apos;</span>;
<span class="hljs-keyword">import</span> {Route } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router-dom&apos;</span>;
<span class="hljs-keyword">import</span> { ConnectedRouter } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;connected-react-router&apos;</span>
<span class="hljs-keyword">import</span> history <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./store/history&apos;</span>;
ReactDOM.render((
    &lt;Provider store={store}&gt;
        &lt;ConnectedRouter history={history}&gt;
            &lt;App&gt;
                &lt;Route exact path=&quot;/&quot; component={Home} /&gt;
                &lt;Route path=&quot;/lesson&quot; component={Lesson} /&gt;
                &lt;Route path=&quot;/profile&quot; component={Profile}/&gt;
            &lt;/App&gt;
        &lt;/ConnectedRouter&gt;
    &lt;/Provider&gt;
),document.getElementById(&apos;root&apos;));
</code></pre>
<h3 id="t72.3 webpack.config.js">2.3 webpack.config.js <a href="#t72.3 webpack.config.js"> # </a></h3>
<pre><code class="lang-diff">module: {
        rules: [
<span class="hljs-addition">+            {</span>
<span class="hljs-addition">+                test: /\.less$/,</span>
<span class="hljs-addition">+                use:[&apos;style-loader&apos;,&apos;css-loader&apos;,&apos;less-loader&apos;]</span>
<span class="hljs-addition">+            }</span>
        ]
    },
</code></pre>
<h3 id="t82.4 common/common.less">2.4 common/common.less <a href="#t82.4 common/common.less"> # </a></h3>
<p> src/common/common.less</p>
<pre><code class="lang-less">*{
    <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
    <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;
}
<span class="hljs-selector-tag">ul</span>,<span class="hljs-selector-tag">li</span>{
    <span class="hljs-attribute">list-style</span>: none;
}
<span class="hljs-selector-tag">a</span>{
    <span class="hljs-attribute">text-decoration</span>: none;
}
<span class="hljs-selector-tag">html</span>,<span class="hljs-selector-tag">body</span>,<span class="hljs-selector-id">#root</span>{
    <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
    <span class="hljs-attribute">height</span>:<span class="hljs-number">100%</span>;
    <span class="hljs-attribute">overflow</span>: hidden;
}
</code></pre>
<h3 id="t92.5 containers/App.tsx">2.5 containers/App.tsx <a href="#t92.5 containers/App.tsx"> # </a></h3>
<p>src/containers/App.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> Tab <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../components/Tab&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;../common/common.less&apos;</span>
<span class="hljs-keyword">export</span> interface Props{
    children?: any,
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>,</span>{}&gt; {
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">React.Fragment</span>&gt;</span>
                {this.props.children}
                <span class="hljs-tag">&lt;<span class="hljs-name">Tab</span>/&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">React.Fragment</span>&gt;</span>
        );
    }
}
</span></code></pre>
<h3 id="t102.6 Tab/index.tsx">2.6 Tab/index.tsx <a href="#t102.6 Tab/index.tsx"> # </a></h3>
<p>src/components/Tab/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> { NavLink } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router-dom&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>
<span class="hljs-keyword">export</span> interface Props{
    children?: any,
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Tab</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt; </span>{
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">nav</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;footer&quot;</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">NavLink</span> <span class="hljs-attr">exact</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/&quot;</span> <span class="hljs-attr">activeClassName</span>=<span class="hljs-string">&quot;active&quot;</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;iconfont icon-xingqiu&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>&#x9996;&#x9875;
                <span class="hljs-tag">&lt;/<span class="hljs-name">NavLink</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">NavLink</span> <span class="hljs-attr">exact</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/lesson&quot;</span> <span class="hljs-attr">activeClassName</span>=<span class="hljs-string">&quot;active&quot;</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;iconfont icon-react&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>&#x6211;&#x7684;&#x8BFE;&#x7A0B;
                <span class="hljs-tag">&lt;/<span class="hljs-name">NavLink</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">NavLink</span> <span class="hljs-attr">exact</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/profile&quot;</span> <span class="hljs-attr">activeClassName</span>=<span class="hljs-string">&quot;active&quot;</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;iconfont icon-xiaolian&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>&#x4E2A;&#x4EBA;&#x4E2D;&#x5FC3;
                <span class="hljs-tag">&lt;/<span class="hljs-name">NavLink</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span></span>
        );
    }
}
</code></pre>
<h3 id="t112.7 Tab/index.less">2.7 Tab/index.less <a href="#t112.7 Tab/index.less"> # </a></h3>
<p>src/components/Tab/index.less</p>
<pre><code class="lang-less"><span class="hljs-selector-class">.footer</span>{
    <span class="hljs-attribute">position</span>: fixed;
    <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
    <span class="hljs-attribute">height</span>:<span class="hljs-number">53px</span>;
    <span class="hljs-attribute">bottom</span>:<span class="hljs-number">0</span>;
    <span class="hljs-attribute">display</span>:flex;
    <span class="hljs-attribute">background</span>: <span class="hljs-number">#FFF</span>;
    <span class="hljs-attribute">border-top</span>:<span class="hljs-number">1px</span> solid <span class="hljs-number">#D5D4D5</span>;
    <span class="hljs-selector-tag">a</span>{
        <span class="hljs-attribute">display</span>: flex;
        <span class="hljs-attribute">flex</span>:<span class="hljs-number">1</span>;
        <span class="hljs-attribute">justify-content</span>: center;
        <span class="hljs-attribute">align-items</span>: center;
        <span class="hljs-attribute">color</span>:<span class="hljs-number">#B5B5B6</span>;
        <span class="hljs-attribute">flex-direction</span>: column;
        <span class="hljs-selector-tag">i</span>{
            <span class="hljs-attribute">font-size</span>:<span class="hljs-number">20px</span>;
        }
        <span class="hljs-selector-tag">&amp;</span><span class="hljs-selector-class">.active</span>{
            <span class="hljs-attribute">color</span>:<span class="hljs-number">#198AE4</span>;
        }
    }
}
</code></pre>
<h3 id="t122.8 Home/index.tsx">2.8 Home/index.tsx <a href="#t122.8 Home/index.tsx"> # </a></h3>
<p>src/components/Home/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">export</span> interface Props{
    <span class="hljs-attr">children</span>: any,
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Home</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt; </span>{
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
               Home
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
        );
    }
}
</code></pre>
<h3 id="t132.9 Lesson/index.tsx">2.9 Lesson/index.tsx <a href="#t132.9 Lesson/index.tsx"> # </a></h3>
<p>src/components/Lesson/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">export</span> interface Props{
    <span class="hljs-attr">children</span>: any,
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Lesson</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt; </span>{
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
               Lesson
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
        );
    }
}
</code></pre>
<h3 id="t142.10 Profile/index.tsx">2.10 Profile/index.tsx <a href="#t142.10 Profile/index.tsx"> # </a></h3>
<p>src/components/Profile/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">export</span> interface Props{
    <span class="hljs-attr">children</span>: any,
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Profile</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt; </span>{
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
               Profile
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
        );
    }
}
</code></pre>
<h2 id="t153. &#x9996;&#x9875;&#x5934;&#x90E8;&#x52A8;&#x753B;">3. &#x9996;&#x9875;&#x5934;&#x90E8;&#x52A8;&#x753B; <a href="#t153. &#x9996;&#x9875;&#x5934;&#x90E8;&#x52A8;&#x753B;"> # </a></h2>
<h3 id="t163.1 types/index.tsx">3.1 types/index.tsx <a href="#t163.1 types/index.tsx"> # </a></h3>
<p>src/store/types/index.tsx</p>
<pre><code class="lang-diff"><span class="hljs-addition">+ export interface Props{</span>
<span class="hljs-addition">+     children?: any,</span>
<span class="hljs-addition">+ }</span>
</code></pre>
<h3 id="t173.2 webpack.config.js">3.2 webpack.config.js <a href="#t173.2 webpack.config.js"> # </a></h3>
<p>webpack.config.js</p>
<pre><code class="lang-diff"><span class="hljs-addition">+ {</span>
<span class="hljs-addition">+     test: /\.(jpg|png|gif)$/,</span>
<span class="hljs-addition">+     use:&apos;url-loader&apos;</span>
<span class="hljs-addition">+ }</span>
</code></pre>
<h3 id="t183.3 HomeHeader/index.tsx">3.3 HomeHeader/index.tsx <a href="#t183.3 HomeHeader/index.tsx"> # </a></h3>
<p>src/components/HomeHeader/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>
<span class="hljs-keyword">import</span> { CSSTransition,TransitionGroup } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-transition-group&apos;</span>;
declare <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">require</span>(<span class="hljs-params">url: string</span>): <span class="hljs-title">string</span>;
<span class="hljs-title">const</span> <span class="hljs-title">logo</span>=<span class="hljs-title">require</span>(<span class="hljs-params"><span class="hljs-string">&apos;../../common/images/logo.png&apos;</span></span>);
<span class="hljs-title">import</span> </span>{ Props } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../store/types&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HomeHeader</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt; </span>{
    state={
        <span class="hljs-attr">showList</span>:<span class="hljs-literal">false</span>
    }
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;home-header&quot;</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;header-menu&quot;</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{logo}</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;logo&quot;</span> /&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =&gt;</span> this.setState({showList:!this.state.showList})}&gt;
                        {
                            this.state.showList?<span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;iconfont icon-guanbi&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>:<span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;iconfont icon-uilist&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
                        }
                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">TransitionGroup</span>&gt;</span>
                        {
                            this.state.showList&amp;&amp;<span class="hljs-tag">&lt;<span class="hljs-name">CSSTransition</span>
                            <span class="hljs-attr">timeout</span>=<span class="hljs-string">{500}</span>
                            <span class="hljs-attr">classNames</span>=<span class="hljs-string">&quot;fade&quot;</span>
                              &gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;menu-list&quot;</span>&gt;</span>
                                    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-category</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>React&#x8BFE;&#x7A0B;<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
                                    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-category</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>Vue&#x8BFE;&#x7A0B;<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
                                <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">CSSTransition</span>&gt;</span>
                        }
                <span class="hljs-tag">&lt;/<span class="hljs-name">TransitionGroup</span>&gt;</span>    
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        );
    }
}
</span></code></pre>
<h3 id="t193.4 HomeHeader/index.less">3.4 HomeHeader/index.less <a href="#t193.4 HomeHeader/index.less"> # </a></h3>
<p>src/components/HomeHeader/index.less</p>
<pre><code class="lang-less"><span class="hljs-selector-class">.home-header</span>{
    <span class="hljs-attribute">background</span>:<span class="hljs-number">#2A2A2A</span>;
    <span class="hljs-attribute">height</span>:<span class="hljs-number">56px</span>;
    <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
    <span class="hljs-attribute">position</span>:fixed;
    <span class="hljs-attribute">top</span>:<span class="hljs-number">0</span>;
    <span class="hljs-attribute">left</span>:<span class="hljs-number">0</span>;
    <span class="hljs-selector-class">.header-menu</span>{
        <span class="hljs-attribute">display</span>:flex;
        <span class="hljs-attribute">height</span>:<span class="hljs-number">56px</span>;
        <span class="hljs-attribute">justify-content</span>: space-between;
        <span class="hljs-attribute">align-items</span>: center;
        <span class="hljs-selector-tag">img</span>{
            <span class="hljs-attribute">height</span>:<span class="hljs-number">30px</span>;
            <span class="hljs-attribute">width</span>:<span class="hljs-number">105px</span>;
            <span class="hljs-attribute">margin-left</span>:<span class="hljs-number">10px</span>;
        }
        <span class="hljs-selector-tag">i</span>{
            <span class="hljs-attribute">color</span>:<span class="hljs-number">#FFF</span>;
            <span class="hljs-attribute">margin-right</span>:<span class="hljs-number">10px</span>;
        }
    }
    <span class="hljs-selector-class">.menu-list</span>{
        <span class="hljs-attribute">position</span>: absolute;
        <span class="hljs-attribute">top</span>:<span class="hljs-number">56px</span>;
        <span class="hljs-attribute">left</span>:<span class="hljs-number">0</span>;
        <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
        <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#000</span>;
        <span class="hljs-selector-tag">li</span>{
            <span class="hljs-attribute">border-top</span>:<span class="hljs-number">1px</span> solid <span class="hljs-number">#464646</span>;
            <span class="hljs-attribute">height</span>:<span class="hljs-number">43px</span>;
            <span class="hljs-attribute">line-height</span>:<span class="hljs-number">43px</span>;
            <span class="hljs-attribute">text-align</span>: center;
            <span class="hljs-attribute">color</span>:<span class="hljs-number">#FFF</span>;
            <span class="hljs-attribute">border-top</span>:<span class="hljs-number">1px</span> solid <span class="hljs-number">#464646</span>;
            <span class="hljs-selector-tag">&amp;</span><span class="hljs-selector-class">.active</span>{
                <span class="hljs-attribute">color</span>:green;
            }
        }
    }
}
<span class="hljs-selector-class">.fade-enter</span> {
    <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.01</span>;
}
<span class="hljs-selector-class">.fade-enter-active</span> {
    <span class="hljs-attribute">opacity</span>: <span class="hljs-number">1</span>;
    <span class="hljs-attribute">transition</span>: opacity <span class="hljs-number">500ms</span> ease-in;
}
<span class="hljs-selector-class">.fade-exit</span> {
    <span class="hljs-attribute">opacity</span>: <span class="hljs-number">1</span>;
}
<span class="hljs-selector-class">.fade-exit-active</span> {
    <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.01</span>;
    <span class="hljs-attribute">transition</span>: opacity <span class="hljs-number">500ms</span> ease-in;
}
</code></pre>
<h2 id="t204.&#x5F53;&#x524D;&#x5206;&#x7C7B;&#x5B58;&#x5165;redux">4.&#x5F53;&#x524D;&#x5206;&#x7C7B;&#x5B58;&#x5165;redux <a href="#t204.&#x5F53;&#x524D;&#x5206;&#x7C7B;&#x5B58;&#x5165;redux"> # </a></h2>
<h3 id="t214.1 HomeHeader/index.tsx">4.1 HomeHeader/index.tsx <a href="#t214.1 HomeHeader/index.tsx"> # </a></h3>
<p>src/components/HomeHeader/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>
<span class="hljs-keyword">import</span> { CSSTransition,TransitionGroup } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-transition-group&apos;</span>;
declare <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">require</span>(<span class="hljs-params">url: string</span>): <span class="hljs-title">string</span>;
<span class="hljs-title">const</span> <span class="hljs-title">logo</span>=<span class="hljs-title">require</span>(<span class="hljs-params"><span class="hljs-string">&apos;../../common/images/logo.png&apos;</span></span>);
<span class="hljs-title">export</span> <span class="hljs-title">interface</span> <span class="hljs-title">Props</span></span>{
    currentCategory?: any,
    setCurrentCategory?: any
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HomeHeader</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt; </span>{
    state={
        <span class="hljs-attr">showList</span>:<span class="hljs-literal">false</span>
    }
    setCurrentCategory=<span class="hljs-function">(<span class="hljs-params">event:any</span>) =&gt;</span> {
        <span class="hljs-keyword">let</span> category=event.target.dataset.category;
        <span class="hljs-keyword">this</span>.props.setCurrentCategory(category);
    }
    render() {
        <span class="hljs-keyword">let</span> {currentCategory}=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;home-header&quot;</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;header-menu&quot;</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{logo}</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;logo&quot;</span> /&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =&gt;</span> this.setState({showList:!this.state.showList})}&gt;
                        {
                            this.state.showList?<span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;iconfont icon-guanbi&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>:<span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;iconfont icon-uilist&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
                        }
                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">TransitionGroup</span>&gt;</span>
                        {
                            this.state.showList&amp;&amp;<span class="hljs-tag">&lt;<span class="hljs-name">CSSTransition</span>
                                  <span class="hljs-attr">timeout</span>=<span class="hljs-string">{500}</span>
                                  <span class="hljs-attr">classNames</span>=<span class="hljs-string">&quot;fade&quot;</span>
                        &gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;menu-list&quot;</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.setCurrentCategory}</span>&gt;</span>
                                    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-category</span>=<span class="hljs-string">&quot;react&quot;</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{currentCategory</span>==<span class="hljs-string">&apos;react&apos;</span>?&apos;<span class="hljs-attr">active</span>&apos;<span class="hljs-attr">:</span>&apos;&apos;}&gt;</span>React<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
                                    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-category</span>=<span class="hljs-string">&quot;vue&quot;</span>  <span class="hljs-attr">className</span>=<span class="hljs-string">{currentCategory</span>==<span class="hljs-string">&apos;vue&apos;</span>?&apos;<span class="hljs-attr">active</span>&apos;<span class="hljs-attr">:</span>&apos;&apos;}&gt;</span>Vue<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
                                <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">CSSTransition</span>&gt;</span>
                        }
                <span class="hljs-tag">&lt;/<span class="hljs-name">TransitionGroup</span>&gt;</span>    
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        );
    }
}
</span></code></pre>
<h3 id="t224.2 Home/index.tsx">4.2 Home/index.tsx <a href="#t224.2 Home/index.tsx"> # </a></h3>
<p>src/containers/Home/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> HomeHeader <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../components/HomeHeader&apos;</span>;
<span class="hljs-keyword">import</span> actions <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../store/actions/home&apos;</span>;
<span class="hljs-keyword">import</span> { Store} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../store/types&apos;</span>;
<span class="hljs-keyword">import</span> { connect } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-redux&apos;</span>;
<span class="hljs-keyword">export</span> interface Props{
    currentCategory?: any,
    setCurrentCategory?: any
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Home</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt; </span>{
    render() {
        <span class="hljs-keyword">return</span> (
            &lt;React.Fragment&gt;
                &lt;HomeHeader
                    currentCategory={this.props.currentCategory}
                    setCurrentCategory={this.props.setCurrentCategory}
                /&gt;
            &lt;/React.Fragment&gt;
        );
    }
}

export default connect(
    (state:Store)=&gt;state.home,
    actions
)(Home);

</code></pre>
<h3 id="t234.3 store/action-types.tsx">4.3 store/action-types.tsx <a href="#t234.3 store/action-types.tsx"> # </a></h3>
<p>src/store/action-types.tsx</p>
<pre><code class="lang-diff"><span class="hljs-addition">+ export const SET_CURRENT_CATEGORY=&apos;SET_CURRENT_CATEGORY&apos;;</span>
</code></pre>
<h3 id="t244.4 reducers/index.tsx">4.4 reducers/index.tsx <a href="#t244.4 reducers/index.tsx"> # </a></h3>
<p>src/store/reducers/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { combineReducers } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;redux&apos;</span>;
<span class="hljs-keyword">import</span> history <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../history&apos;</span>;
<span class="hljs-keyword">import</span> home <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./home&apos;</span>;
<span class="hljs-keyword">import</span> { connectRouter } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;connected-react-router&apos;</span>
<span class="hljs-keyword">let</span> reducers=combineReducers({
    home,
    <span class="hljs-attr">router</span>: connectRouter(history)
});
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> reducers;
</code></pre>
<h3 id="t254.5 types/index.tsx">4.5 types/index.tsx <a href="#t254.5 types/index.tsx"> # </a></h3>
<p>src/store/types/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">export</span> interface Store{
    <span class="hljs-attr">home</span>: Home
}
<span class="hljs-keyword">export</span> interface Home{
    <span class="hljs-attr">currentCategory</span>: string
}

<span class="hljs-keyword">export</span> interface Props{
    children?: any,
}
</code></pre>
<h3 id="t264.6 actions/home.tsx">4.6 actions/home.tsx <a href="#t264.6 actions/home.tsx"> # </a></h3>
<p>src/store/actions/home.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> {SET_CURRENT_CATEGORY} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../action-types&apos;</span>;
<span class="hljs-keyword">export</span> interface setCurrentCategory{
    <span class="hljs-attr">type</span>: <span class="hljs-keyword">typeof</span> SET_CURRENT_CATEGORY,
    <span class="hljs-attr">currentCategory</span>:string
}
<span class="hljs-keyword">export</span> type Action=setCurrentCategory;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    setCurrentCategory(currentCategory:string): setCurrentCategory {
        <span class="hljs-keyword">return</span> { <span class="hljs-attr">type</span>: SET_CURRENT_CATEGORY,currentCategory };
    }
}
</code></pre>
<h3 id="t274.7 reducers/home.tsx">4.7 reducers/home.tsx <a href="#t274.7 reducers/home.tsx"> # </a></h3>
<p>src/store/reducers/home.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> types <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../action-types&apos;</span>;
<span class="hljs-keyword">import</span> { Home } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../types&apos;</span>;
<span class="hljs-keyword">import</span> {Action} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../actions/home&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">state: Home={ currentCategory: <span class="hljs-string">&apos;&apos;</span> },action: Action</span>): <span class="hljs-title">Home</span> </span>{
    <span class="hljs-keyword">switch</span> (action.type) {
        <span class="hljs-keyword">case</span> types.SET_CURRENT_CATEGORY:
            <span class="hljs-keyword">return</span> {...state,<span class="hljs-attr">currentCategory</span>:action.currentCategory};
        <span class="hljs-keyword">default</span>:
            <span class="hljs-keyword">return</span> state;
    }
}
</code></pre>
<h2 id="t285. &#x8F6E;&#x64AD;&#x56FE;">5. &#x8F6E;&#x64AD;&#x56FE; <a href="#t285. &#x8F6E;&#x64AD;&#x56FE;"> # </a></h2>
<h3 id="t295.1 HomeSwiper/index.tsx">5.1 HomeSwiper/index.tsx <a href="#t295.1 HomeSwiper/index.tsx"> # </a></h3>
<p>src/components/HomeSwiper/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> ReactSwipe <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-swipe&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>;
interface Props{
    <span class="hljs-attr">sliders</span>:any
}
<span class="hljs-keyword">export</span> interface State{
    <span class="hljs-attr">index</span>:number
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Swiper</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>,<span class="hljs-title">State</span>&gt; </span>{
    state={ <span class="hljs-attr">index</span>:<span class="hljs-number">0</span>}
    render() {
        <span class="hljs-keyword">let</span> options={
            <span class="hljs-attr">continuous</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">callback</span>: <span class="hljs-function">(<span class="hljs-params">index: number</span>) =&gt;</span> {
                <span class="hljs-keyword">this</span>.setState({index});
            }
        }
        <span class="hljs-keyword">let</span> swiper=(
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">ReactSwipe</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;carousel&quot;</span> <span class="hljs-attr">swipeOptions</span>=<span class="hljs-string">{options}</span>&gt;</span>
                {this.props.sliders.map((item:string,index:number) =&gt; (
                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{index}</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{item}/</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                ))}
            <span class="hljs-tag">&lt;/<span class="hljs-name">ReactSwipe</span>&gt;</span>
        )
        return (
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;home-sliders&quot;</span>&gt;</span>
                {this.props.sliders.length&gt;0? swiper:null}
                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;dots&quot;</span>&gt;</span>
                    {
                        this.props.sliders.map((item:string,index:number) =&gt; (
                            <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{index}</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{</span>`<span class="hljs-attr">dot</span> ${<span class="hljs-attr">this.state.index</span> ==<span class="hljs-string">index?</span>&apos;<span class="hljs-attr">active</span>&apos;<span class="hljs-attr">:</span>&apos;&apos;}`}&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
                        ))
                    }
                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        );
    }
}
</span></code></pre>
<h3 id="t305.2 HomeSwiper/index.less">5.2 HomeSwiper/index.less <a href="#t305.2 HomeSwiper/index.less"> # </a></h3>
<p>src/components/HomeSwiper/index.less</p>
<pre><code class="lang-less"><span class="hljs-selector-class">.home-sliders</span>{
    <span class="hljs-attribute">position</span>: relative;
    <span class="hljs-selector-tag">img</span>{
        <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
    }
    <span class="hljs-selector-class">.dots</span>{
        <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
        <span class="hljs-attribute">position</span>: absolute;
        <span class="hljs-attribute">bottom</span>:<span class="hljs-number">7px</span>;
        <span class="hljs-attribute">display</span>: flex;
        <span class="hljs-attribute">justify-content</span>: center;
        <span class="hljs-attribute">align-items</span>: center;
        <span class="hljs-selector-class">.dot</span>{
            <span class="hljs-attribute">width</span>:<span class="hljs-number">8px</span>;
            <span class="hljs-attribute">height</span>:<span class="hljs-number">8px</span>;
            <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">5px</span>;
            <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#FFF</span>;
            <span class="hljs-attribute">margin-left</span>:<span class="hljs-number">5px</span>;
            <span class="hljs-selector-tag">&amp;</span><span class="hljs-selector-class">.active</span>{
                <span class="hljs-attribute">background-color</span>:salmon;
            }
        }
    }
}
</code></pre>
<h3 id="t315.3 server/app.js">5.3 server/app.js <a href="#t315.3 server/app.js"> # </a></h3>
<p>server/app.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> express=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;express&apos;</span>);
<span class="hljs-keyword">let</span> app=express();
app.use(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req,res,next</span>) </span>{
    res.header(<span class="hljs-string">&apos;Access-Control-Allow-Methods&apos;</span>,<span class="hljs-string">&apos;PUT,POST,GET,DELETE,OPTIONS&apos;</span>);
    res.header(<span class="hljs-string">&apos;Access-Control-Allow-Origin&apos;</span>,<span class="hljs-string">&apos;http://localhost:8081&apos;</span>);
    res.header(<span class="hljs-string">&apos;Access-Control-Allow-Credentials&apos;</span>,<span class="hljs-string">&apos;true&apos;</span>);
    <span class="hljs-keyword">if</span> (req.method === <span class="hljs-string">&apos;OPTIONS&apos;</span>) {
        <span class="hljs-keyword">return</span> res.sendStatus(<span class="hljs-number">200</span>);
    }
    next();
});
app.listen(<span class="hljs-number">3000</span>);
<span class="hljs-keyword">let</span> sliders=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./mock/sliders&apos;</span>);
app.get(<span class="hljs-string">&apos;/sliders&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req,res</span>) </span>{
    res.json(sliders);
});
</code></pre>
<h3 id="t325.4 src/api/index.tsx">5.4 src/api/index.tsx <a href="#t325.4 src/api/index.tsx"> # </a></h3>
<p>src/api/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> API_HOST=<span class="hljs-string">&apos;http://localhost:3000&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> get=<span class="hljs-function">(<span class="hljs-params">url:string</span>) =&gt;</span> {
    <span class="hljs-keyword">return</span> fetch(API_HOST+url,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;GET&apos;</span>,
        <span class="hljs-attr">credentials</span>: <span class="hljs-string">&apos;include&apos;</span>,<span class="hljs-comment">//&#x8DE8;&#x57DF;&#x643A;&#x5E26;cookie</span>
        headers: {
            <span class="hljs-attr">accept</span>:<span class="hljs-string">&apos;application/json&apos;</span>
        }
    }).then(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>res.json());
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> post=<span class="hljs-function">(<span class="hljs-params">url:string,data:object</span>) =&gt;</span> {
    <span class="hljs-keyword">return</span> fetch(API_HOST+url,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;POST&apos;</span>,
        <span class="hljs-attr">body</span>: <span class="hljs-built_in">JSON</span>.stringify(data),
        <span class="hljs-attr">headers</span>: {
            <span class="hljs-string">&apos;Content-Type&apos;</span>: <span class="hljs-string">&apos;application/json&apos;</span>,
            <span class="hljs-string">&apos;Accept&apos;</span>:<span class="hljs-string">&apos;application/json&apos;</span>
        }
    });
}
</code></pre>
<h3 id="t335.5 api/home.tsx">5.5 api/home.tsx <a href="#t335.5 api/home.tsx"> # </a></h3>
<p>src/api/home.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> {get} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./index&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> getSliders=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
    <span class="hljs-keyword">return</span> get(<span class="hljs-string">&apos;/sliders&apos;</span>);
}
</code></pre>
<h3 id="t345.6 server/app.js">5.6 server/app.js <a href="#t345.6 server/app.js"> # </a></h3>
<p>server/app.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> express=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;express&apos;</span>);
<span class="hljs-keyword">let</span> app=express();
app.use(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req,res,next</span>) </span>{
    res.header(<span class="hljs-string">&apos;Access-Control-Allow-Methods&apos;</span>,<span class="hljs-string">&apos;PUT,POST,GET,DELETE,OPTIONS&apos;</span>);
    res.header(<span class="hljs-string">&apos;Access-Control-Allow-Origin&apos;</span>,<span class="hljs-string">&apos;http://localhost:8081&apos;</span>);
    res.header(<span class="hljs-string">&apos;Access-Control-Allow-Credentials&apos;</span>,<span class="hljs-string">&apos;true&apos;</span>);
    <span class="hljs-keyword">if</span> (req.method === <span class="hljs-string">&apos;OPTIONS&apos;</span>) {
        <span class="hljs-keyword">return</span> res.sendStatus(<span class="hljs-number">200</span>);
    }
    next();
});
app.listen(<span class="hljs-number">3000</span>);
<span class="hljs-keyword">let</span> sliders=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./mock/sliders&apos;</span>);
app.get(<span class="hljs-string">&apos;/sliders&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req,res</span>) </span>{
    res.json(sliders);
});
</code></pre>
<h3 id="t355.7 server/mock/sliders.js">5.7 server/mock/sliders.js <a href="#t355.7 server/mock/sliders.js"> # </a></h3>
<p>server/mock/sliders.js</p>
<pre><code class="lang-js"><span class="hljs-built_in">module</span>.exports = [
    <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/reactnative.png&apos;</span>,
    <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/react.png&apos;</span>,
    <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/vue.png&apos;</span>,
    <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/wechat.png&apos;</span>,
    <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/architect.jpg&apos;</span>
  ];
</code></pre>
<h2 id="t366. &#x8BFE;&#x7A0B;&#x5217;&#x8868;">6. &#x8BFE;&#x7A0B;&#x5217;&#x8868; <a href="#t366. &#x8BFE;&#x7A0B;&#x5217;&#x8868;"> # </a></h2>
<h3 id="t376.1 server/app.js">6.1 server/app.js <a href="#t376.1 server/app.js"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> lessons = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./mock/lessons&apos;</span>);
<span class="hljs-comment">// http://getLessons/vue?offset=0&amp;limit=5</span>
app.get(<span class="hljs-string">&apos;/getLessons/:category&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req,res</span>)</span>{
   <span class="hljs-keyword">let</span> category = req.params.category;
   <span class="hljs-keyword">let</span> {offset,limit} = req.query;
   offset = <span class="hljs-built_in">isNaN</span>(offset)?<span class="hljs-number">0</span>:<span class="hljs-built_in">parseInt</span>(offset);<span class="hljs-comment">//&#x504F;&#x79FB;&#x91CF; </span>
   limit = <span class="hljs-built_in">isNaN</span>(limit)?<span class="hljs-number">5</span>:<span class="hljs-built_in">parseInt</span>(limit); <span class="hljs-comment">//&#x6BCF;&#x9875;&#x6761;&#x6570;</span>
   <span class="hljs-keyword">let</span> list = <span class="hljs-built_in">JSON</span>.parse(<span class="hljs-built_in">JSON</span>.stringify(lessons));
   <span class="hljs-keyword">if</span>(category!=<span class="hljs-string">&apos;all&apos;</span>){
     list = list.filter(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span>item.category==category);
   }
   <span class="hljs-keyword">let</span> total = list.length;
   <span class="hljs-comment">//&#x5206;&#x9875;&#x6570;&#x636E;</span>
   list = list.slice(offset,offset+limit);
   <span class="hljs-comment">//list.forEach(item=&gt;item.title= item.title+Math.random());</span>
   setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    res.json({
        list,
        <span class="hljs-attr">hasMore</span>:total&gt;offset+limit
    });
   },<span class="hljs-number">1000</span>);
});
</code></pre>
<h3 id="t386.2 mock/lessons.js">6.2 mock/lessons.js <a href="#t386.2 mock/lessons.js"> # </a></h3>
<p>server/mock/lessons.js</p>
<pre><code class="lang-js"><span class="hljs-built_in">module</span>.exports = [
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;1.React&#x5168;&#x6808;&#x67B6;&#x6784;&apos;</span>,
      <span class="hljs-string">&quot;video&quot;</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/react/img/react.jpg&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/react.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;100.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;react&apos;</span>
    },
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">2</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;2.React&#x5168;&#x6808;&#x67B6;&#x6784;&apos;</span>,
      <span class="hljs-attr">video</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/react/img/react.jpg&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/react.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;200.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;react&apos;</span>
    },
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">3</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;3.React&#x5168;&#x6808;&#x67B6;&#x6784;&apos;</span>,
      <span class="hljs-attr">video</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/react/img/react.jpg&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/react.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;300.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;react&apos;</span>
    },
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">4</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;4.React&#x5168;&#x6808;&#x67B6;&#x6784;&apos;</span>,
      <span class="hljs-attr">video</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/react/img/react.jpg&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/react.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;400.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;react&apos;</span>
    },
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">5</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;5.React&#x5168;&#x6808;&#x67B6;&#x6784;&apos;</span>,
      <span class="hljs-attr">video</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/react/img/react.jpg&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/react.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;500.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;react&apos;</span>
    },
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">6</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;6.Vue&#x4ECE;&#x5165;&#x95E8;&#x5230;&#x9879;&#x76EE;&#x5B9E;&#x6218;&apos;</span>,
      <span class="hljs-attr">video</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/vue/img/vue.png&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/vue.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;100.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;vue&apos;</span>
    },
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">7</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;7.Vue&#x4ECE;&#x5165;&#x95E8;&#x5230;&#x9879;&#x76EE;&#x5B9E;&#x6218;&apos;</span>,
      <span class="hljs-attr">video</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/vue/img/vue.png&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/vue.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;200.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;vue&apos;</span>
    },
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">8</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;8.Vue&#x4ECE;&#x5165;&#x95E8;&#x5230;&#x9879;&#x76EE;&#x5B9E;&#x6218;&apos;</span>,
      <span class="hljs-attr">video</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/vue/img/vue.png&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/vue.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;300.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;vue&apos;</span>
    },
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">9</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;9.Vue&#x4ECE;&#x5165;&#x95E8;&#x5230;&#x9879;&#x76EE;&#x5B9E;&#x6218;&apos;</span>,
      <span class="hljs-attr">video</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/vue/img/vue.png&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/vue.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;400.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;vue&apos;</span>
    },
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">10</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;10.Vue&#x4ECE;&#x5165;&#x95E8;&#x5230;&#x9879;&#x76EE;&#x5B9E;&#x6218;&apos;</span>,
      <span class="hljs-attr">video</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/vue/img/vue.png&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/vue.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;500.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;vue&apos;</span>
    },
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">11</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;11.React&#x5168;&#x6808;&#x67B6;&#x6784;&apos;</span>,
      <span class="hljs-string">&quot;video&quot;</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/react/img/react.jpg&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/react.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;600.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;react&apos;</span>
    },
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">12</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;12.React&#x5168;&#x6808;&#x67B6;&#x6784;&apos;</span>,
      <span class="hljs-attr">video</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/react/img/react.jpg&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/react.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;700.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;react&apos;</span>
    },
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">13</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;13.React&#x5168;&#x6808;&#x67B6;&#x6784;&apos;</span>,
      <span class="hljs-attr">video</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/react/img/react.jpg&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/react.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;800.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;react&apos;</span>
    },
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">14</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;14.React&#x5168;&#x6808;&#x67B6;&#x6784;&apos;</span>,
      <span class="hljs-attr">video</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/react/img/react.jpg&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/react.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;900.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;react&apos;</span>
    },
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">15</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;15.React&#x5168;&#x6808;&#x67B6;&#x6784;&apos;</span>,
      <span class="hljs-attr">video</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/react/img/react.jpg&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/react.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;1000.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;react&apos;</span>
    },
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">16</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;16.Vue&#x4ECE;&#x5165;&#x95E8;&#x5230;&#x9879;&#x76EE;&#x5B9E;&#x6218;&apos;</span>,
      <span class="hljs-attr">video</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/vue/img/vue.png&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/vue.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;600.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;vue&apos;</span>
    },
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">17</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;17.Vue&#x4ECE;&#x5165;&#x95E8;&#x5230;&#x9879;&#x76EE;&#x5B9E;&#x6218;&apos;</span>,
      <span class="hljs-attr">video</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/vue/img/vue.png&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/vue.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;700.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;vue&apos;</span>
    },
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">18</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;18.Vue&#x4ECE;&#x5165;&#x95E8;&#x5230;&#x9879;&#x76EE;&#x5B9E;&#x6218;&apos;</span>,
      <span class="hljs-attr">video</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/vue/img/vue.png&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/vue.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;800.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;vue&apos;</span>
    },
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">19</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;19.Vue&#x4ECE;&#x5165;&#x95E8;&#x5230;&#x9879;&#x76EE;&#x5B9E;&#x6218;&apos;</span>,
      <span class="hljs-attr">video</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/vue/img/vue.png&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/vue.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;900.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;vue&apos;</span>
    },
    {
      <span class="hljs-attr">id</span>: <span class="hljs-number">20</span>,
      <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;20.Vue&#x4ECE;&#x5165;&#x95E8;&#x5230;&#x9879;&#x76EE;&#x5B9E;&#x6218;&apos;</span>,
      <span class="hljs-attr">video</span>:<span class="hljs-string">&quot;http://7xil5b.com1.z0.glb.clouddn.com/zhufengpeixun.mp4&quot;</span>,
      <span class="hljs-attr">poster</span>:<span class="hljs-string">&quot;http://www.zhufengpeixun.cn/vue/img/vue.png&quot;</span>,
      <span class="hljs-attr">url</span>: <span class="hljs-string">&apos;http://www.zhufengpeixun.cn/themes/jianmo2/images/vue.png&apos;</span>,
      <span class="hljs-attr">price</span>: <span class="hljs-string">&apos;&#xA5;1000.00&#x5143;&apos;</span>,
      <span class="hljs-attr">category</span>:<span class="hljs-string">&apos;vue&apos;</span>
    }
  ]
</code></pre>
<h3 id="t396.3 api/home.tsx">6.3 api/home.tsx <a href="#t396.3 api/home.tsx"> # </a></h3>
<p>src/api/home.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> {get} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./index&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> getSliders=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
    <span class="hljs-keyword">return</span> get(<span class="hljs-string">&apos;/sliders&apos;</span>);
}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getLessons</span>(<span class="hljs-params">category:string,offset:number,limit:number</span>)</span>{
    <span class="hljs-keyword">return</span> get(<span class="hljs-string">`/getLessons/<span class="hljs-subst">${category}</span>?offset=<span class="hljs-subst">${offset}</span>&amp;limit=<span class="hljs-subst">${limit}</span>`</span>);
}
</code></pre>
<h3 id="t406.4 HomeHeader/index.tsx">6.4 HomeHeader/index.tsx <a href="#t406.4 HomeHeader/index.tsx"> # </a></h3>
<p>src/components/HomeHeader/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>
<span class="hljs-keyword">import</span> { CSSTransition,TransitionGroup } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-transition-group&apos;</span>;
declare <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">require</span>(<span class="hljs-params">url: string</span>): <span class="hljs-title">string</span>;
<span class="hljs-title">const</span> <span class="hljs-title">logo</span>=<span class="hljs-title">require</span>(<span class="hljs-params"><span class="hljs-string">&apos;../../common/images/logo.png&apos;</span></span>);
<span class="hljs-title">export</span> <span class="hljs-title">interface</span> <span class="hljs-title">Props</span></span>{
    currentCategory?: any,
    setCurrentCategory?: any,
    <span class="hljs-attr">fetchLessons</span>:any
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HomeHeader</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt; </span>{
    state={
        <span class="hljs-attr">showList</span>:<span class="hljs-literal">false</span>
    }
    setCurrentCategory=<span class="hljs-function">(<span class="hljs-params">event:any</span>) =&gt;</span> {
        <span class="hljs-keyword">let</span> category=event.target.dataset.category;
        <span class="hljs-keyword">this</span>.setState({ <span class="hljs-attr">showList</span>: <span class="hljs-literal">false</span> },() =&gt; {
            <span class="hljs-keyword">this</span>.props.setCurrentCategory(category);
            <span class="hljs-keyword">this</span>.props.fetchLessons();
        });

    }
    render() {
        <span class="hljs-keyword">let</span> {currentCategory}=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;home-header&quot;</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;header-menu&quot;</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{logo}</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;logo&quot;</span> /&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =&gt;</span> this.setState({showList:!this.state.showList})}&gt;
                        {
                            this.state.showList?<span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;iconfont icon-guanbi&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>:<span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;iconfont icon-uilist&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
                        }
                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">TransitionGroup</span>&gt;</span>
                        {
                            this.state.showList&amp;&amp;<span class="hljs-tag">&lt;<span class="hljs-name">CSSTransition</span>
                                  <span class="hljs-attr">timeout</span>=<span class="hljs-string">{500}</span>
                                  <span class="hljs-attr">classNames</span>=<span class="hljs-string">&quot;fade&quot;</span>
                        &gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;menu-list&quot;</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.setCurrentCategory}</span>&gt;</span>
                                    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-category</span>=<span class="hljs-string">&quot;react&quot;</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{currentCategory</span>==<span class="hljs-string">&apos;react&apos;</span>?&apos;<span class="hljs-attr">active</span>&apos;<span class="hljs-attr">:</span>&apos;&apos;}&gt;</span>React<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
                                    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-category</span>=<span class="hljs-string">&quot;vue&quot;</span>  <span class="hljs-attr">className</span>=<span class="hljs-string">{currentCategory</span>==<span class="hljs-string">&apos;vue&apos;</span>?&apos;<span class="hljs-attr">active</span>&apos;<span class="hljs-attr">:</span>&apos;&apos;}&gt;</span>Vue<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
                                <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">CSSTransition</span>&gt;</span>
                        }
                <span class="hljs-tag">&lt;/<span class="hljs-name">TransitionGroup</span>&gt;</span>    
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        );
    }
}
</span></code></pre>
<h3 id="t416.5 Home/index.tsx">6.5 Home/index.tsx <a href="#t416.5 Home/index.tsx"> # </a></h3>
<p>src/containers/Home/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> HomeHeader <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../components/HomeHeader&apos;</span>;
<span class="hljs-keyword">import</span> actions <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../store/actions/home&apos;</span>;
<span class="hljs-keyword">import</span> { Store} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../store/types&apos;</span>;
<span class="hljs-keyword">import</span> { connect } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-redux&apos;</span>;
<span class="hljs-keyword">import</span> HomeSwiper <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../components/HomeSwiper&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>;
<span class="hljs-keyword">import</span> HomeLessons <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./HomeLessons&apos;</span>;
<span class="hljs-keyword">export</span> interface Props{
    currentCategory?: any,
    setCurrentCategory?: any,
    <span class="hljs-attr">sliders</span>: any,
    <span class="hljs-attr">getSliders</span>: any,
    <span class="hljs-attr">fetchLessons</span>: any,
    <span class="hljs-attr">lessons</span>:any
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Home</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt; </span>{
    mainContent: any
    componentDidMount() {
        <span class="hljs-keyword">this</span>.props.getSliders();
        <span class="hljs-keyword">this</span>.props.fetchLessons();
    }
    render() {
        <span class="hljs-keyword">let</span> {currentCategory,setCurrentCategory,fetchLessons,lessons}=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">return</span> (
            &lt;React.Fragment&gt;
                &lt;HomeHeader
                    currentCategory={currentCategory}
                    setCurrentCategory={setCurrentCategory}
                    fetchLessons={fetchLessons}
                /&gt;
                &lt;div className=&quot;main-content&quot; ref={ref =&gt; this.mainContent=ref}&gt;
                    &lt;HomeSwiper sliders={this.props.sliders} /&gt;
                    &lt;HomeLessons
                    lessons={lessons}
                    fetchLessons={this.props.fetchLessons}
                  /&gt;
                &lt;/div&gt;
            &lt;/React.Fragment&gt;
        );
    }
}

export default connect(
    (state:Store)=&gt;state.home,
    actions
)(Home);

</code></pre>
<h3 id="t426.6 store/action-types.tsx">6.6 store/action-types.tsx <a href="#t426.6 store/action-types.tsx"> # </a></h3>
<p>src/store/action-types.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> SET_CURRENT_CATEGORY=<span class="hljs-string">&apos;SET_CURRENT_CATEGORY&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> SET_HOME_SLIDERS=<span class="hljs-string">&apos;SET_HOME_SLIDERS&apos;</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> SET_LOADING_LESSONS = <span class="hljs-string">&apos;SET_LOADING_LESSONS&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> SET_LESSONS=<span class="hljs-string">&apos;SET_LESSONS&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> FETCH_LESSONS=<span class="hljs-string">&apos;FETCH_LESSONS&apos;</span>;
</code></pre>
<h3 id="t436.7 actions/home.tsx">6.7 actions/home.tsx <a href="#t436.7 actions/home.tsx"> # </a></h3>
<p>src/store/actions/home.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> types <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../action-types&apos;</span>;
<span class="hljs-keyword">import</span> {getSliders,getLessons} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../api/home&apos;</span>;
<span class="hljs-keyword">export</span> interface setCurrentCategory{
    <span class="hljs-attr">type</span>: <span class="hljs-keyword">typeof</span> types.SET_CURRENT_CATEGORY,
    <span class="hljs-attr">currentCategory</span>:string
}
<span class="hljs-keyword">export</span> type Action=any;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    setCurrentCategory(currentCategory:string): setCurrentCategory {
        <span class="hljs-keyword">return</span> { <span class="hljs-attr">type</span>: types.SET_CURRENT_CATEGORY,currentCategory };
    },
    getSliders(){
        <span class="hljs-comment">//&#x8FD9;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#x662F;redux-thunk &#x63D0;&#x4F9B;&#x7684; </span>
        <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">dispatch:any,getState:any</span>)</span>{
            getSliders().then(<span class="hljs-function">(<span class="hljs-params">sliders:any</span>)=&gt;</span>{
                dispatch({<span class="hljs-attr">type</span>:types.SET_HOME_SLIDERS,<span class="hljs-attr">payload</span>:sliders});
            });
        }
    },
    fetchLessons() {
        <span class="hljs-keyword">return</span> <span class="hljs-function">(<span class="hljs-params">dispatch:any,getState:any</span>) =&gt;</span> {
            <span class="hljs-keyword">let</span> {currentCategory,<span class="hljs-attr">lessons</span>: {hasMore,offset,limit,loading}}=getState().home;
            <span class="hljs-keyword">if</span> (hasMore &amp;&amp;!loading) {
                dispatch({<span class="hljs-attr">type</span>:types.SET_LOADING_LESSONS,<span class="hljs-attr">payload</span>:<span class="hljs-literal">true</span>});
                getLessons(currentCategory,offset,limit).then(<span class="hljs-function"><span class="hljs-params">payload</span> =&gt;</span> {
                    dispatch({<span class="hljs-attr">type</span>: types.FETCH_LESSONS,payload});
                });
            }
        }
    }
}

</code></pre>
<h3 id="t446.8 reducers/home.tsx">6.8 reducers/home.tsx <a href="#t446.8 reducers/home.tsx"> # </a></h3>
<p>src/store/reducers/home.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> types <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../action-types&apos;</span>;
<span class="hljs-keyword">import</span> { Home } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../types&apos;</span>;
<span class="hljs-keyword">import</span> {Action} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../actions/home&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">state: Home={ currentCategory: <span class="hljs-string">&apos;all&apos;</span>,sliders:[],lessons:{loading:false,hasMore:true,list:[],offset:<span class="hljs-number">0</span>} },action: Action</span>): <span class="hljs-title">Home</span> </span>{
    <span class="hljs-keyword">switch</span> (action.type) {
        <span class="hljs-keyword">case</span> types.SET_CURRENT_CATEGORY:
            <span class="hljs-keyword">return</span> { ...state,<span class="hljs-attr">currentCategory</span>: action.currentCategory };
        <span class="hljs-keyword">case</span> types.SET_HOME_SLIDERS:
            <span class="hljs-keyword">return</span> { ...state,<span class="hljs-attr">sliders</span>: action.payload };
        <span class="hljs-keyword">case</span> types.FETCH_LESSONS:
            <span class="hljs-keyword">return</span> {
                ...state,
                <span class="hljs-attr">lessons</span>: {
                    ...state.lessons,
                    <span class="hljs-attr">loading</span>: <span class="hljs-literal">false</span>,
                    <span class="hljs-attr">hasMore</span>:action.payload.hasMore,
                    <span class="hljs-attr">list</span>: action.payload.list,
                    <span class="hljs-attr">offset</span>:action.payload.list.length
                }
            };
        <span class="hljs-keyword">default</span>:
            <span class="hljs-keyword">return</span> state;
    }
}
</code></pre>
<h3 id="t456.9 types/index.tsx">6.9 types/index.tsx <a href="#t456.9 types/index.tsx"> # </a></h3>
<p>src/store/types/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">export</span> interface Store{
    <span class="hljs-attr">home</span>: Home
}
<span class="hljs-keyword">export</span> interface Home{
    <span class="hljs-attr">currentCategory</span>: string,
    <span class="hljs-attr">sliders</span>: string[],
    <span class="hljs-attr">lessons</span>:any
}

<span class="hljs-keyword">export</span> interface Props{
    children?: any,
}
</code></pre>
<h3 id="t466.10 Loading/index.tsx">6.10 Loading/index.tsx <a href="#t466.10 Loading/index.tsx"> # </a></h3>
<p>src/components/Loading/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>
<span class="hljs-keyword">export</span> interface Props{
    children?: any,
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Loading</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt; </span>{
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;loading&quot;</span>&gt;</span>
                loading
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
        );
    }
}
</code></pre>
<h3 id="t476.11 HomeLessons/index.tsx">6.11 HomeLessons/index.tsx <a href="#t476.11 HomeLessons/index.tsx"> # </a></h3>
<p>src/containers/Home/HomeLessons/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>;
<span class="hljs-keyword">import</span> Loading <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../../components/Loading&apos;</span>;
<span class="hljs-keyword">import</span> { Link } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router-dom&apos;</span>;
interface Props {
    <span class="hljs-attr">lessons</span>: any,
    <span class="hljs-attr">fetchLessons</span>:any
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HomeLessons</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt;</span>{
    render(){
        <span class="hljs-keyword">let</span> {list,hasMore,loading} = <span class="hljs-keyword">this</span>.props.lessons;
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;home-lessons&quot;</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;all-lessons&quot;</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;iconfont icon-kecheng-copy&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>&#x5168;&#x90E8;&#x8BFE;&#x7A0B;<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                {
                    list.length&gt;0?list.map((item:any,index:number)=&gt;(
                        <span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{index}</span> <span class="hljs-attr">to</span>=<span class="hljs-string">{{pathname:</span>`/<span class="hljs-attr">detail</span>/${<span class="hljs-attr">item.id</span>}`,<span class="hljs-attr">state:item</span>}}&gt;</span>
                            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{index}</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;lesson&quot;</span>&gt;</span>
                                <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{item.poster}/</span>&gt;</span>
                                <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{item.title}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
                                <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{item.price}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
                            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                        <span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span>
                    )):<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;no-data&quot;</span>&gt;</span>&#x6682;&#x65E0;&#x6570;&#x636E;<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                }
                {
                    loading?<span class="hljs-tag">&lt;<span class="hljs-name">Loading</span>/&gt;</span>:(!hasMore&amp;&amp; <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;loading-more&quot;</span> &gt;</span>&#x5230;&#x5E95;&#x4E86;<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>)
                }
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        )
    }
}
</span></code></pre>
<h3 id="t486.12 HomeLessons/index.less">6.12 HomeLessons/index.less <a href="#t486.12 HomeLessons/index.less"> # </a></h3>
<p>src/containers/Home/HomeLessons/index.less</p>
<pre><code class="lang-less"><span class="hljs-selector-class">.home-lessons</span>{
    <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
    <span class="hljs-attribute">box-sizing</span>: border-box;
    <span class="hljs-attribute">padding</span>:<span class="hljs-number">7.5px</span>;
    <span class="hljs-selector-class">.all-lessons</span>{
        <span class="hljs-attribute">margin</span>:<span class="hljs-number">10px</span> <span class="hljs-number">0</span>;
        <span class="hljs-selector-tag">span</span>{
            <span class="hljs-attribute">margin-left</span>:<span class="hljs-number">8px</span>;
        }
    }
    <span class="hljs-selector-class">.no-data</span>{
        <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
        <span class="hljs-attribute">height</span>:<span class="hljs-number">35px</span>;
        <span class="hljs-attribute">line-height</span>: <span class="hljs-number">35px</span>;
        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">5px</span>;
        <span class="hljs-attribute">color</span>:<span class="hljs-number">#000</span>;
        <span class="hljs-attribute">text-align</span>:center;
    }
    <span class="hljs-selector-class">.lesson</span>{
        <span class="hljs-attribute">overflow</span>: hidden;
        <span class="hljs-attribute">margin-bottom</span>:<span class="hljs-number">17px</span>;
        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">8px</span>;
        <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">1px</span> <span class="hljs-number">1px</span> <span class="hljs-number">3px</span> <span class="hljs-number">2px</span> <span class="hljs-number">#c1c1c1</span>,-<span class="hljs-number">1px</span> -<span class="hljs-number">1px</span> <span class="hljs-number">3px</span> <span class="hljs-number">2px</span> <span class="hljs-number">#c1c1c1</span>;
        <span class="hljs-selector-tag">img</span>{
            <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
            <span class="hljs-attribute">height</span>:<span class="hljs-number">140px</span>;
            <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">8px</span> <span class="hljs-number">8px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span>;
        }
        <span class="hljs-selector-tag">p</span>{
            <span class="hljs-attribute">height</span>:<span class="hljs-number">37px</span>;
            <span class="hljs-attribute">text-align</span>: center;
            <span class="hljs-attribute">line-height</span>: <span class="hljs-number">37px</span>;
            <span class="hljs-selector-tag">&amp;</span><span class="hljs-selector-pseudo">:nth-child(2)</span>{
                <span class="hljs-attribute">color</span>:<span class="hljs-number">#b3b3b3</span>;
            }
            <span class="hljs-selector-tag">&amp;</span><span class="hljs-selector-pseudo">:nth-child(3)</span>{
                <span class="hljs-attribute">color</span>:<span class="hljs-number">#ed3a3a</span>;
            }
        }
    }
    <span class="hljs-selector-class">.loading-more</span>{
        <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
        <span class="hljs-attribute">height</span>:<span class="hljs-number">35px</span>;
        <span class="hljs-attribute">line-height</span>: <span class="hljs-number">35px</span>;
        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">5px</span>;
        <span class="hljs-attribute">background-color</span>:seagreen;
        <span class="hljs-attribute">color</span>:<span class="hljs-number">#FFF</span>;
        <span class="hljs-attribute">text-align</span>:center;
    }
}
</code></pre>
<h2 id="t497. &#x52A0;&#x8F7D;&#x66F4;&#x591A;">7. &#x52A0;&#x8F7D;&#x66F4;&#x591A; <a href="#t497. &#x52A0;&#x8F7D;&#x66F4;&#x591A;"> # </a></h2>
<h3 id="t507.1 server/app.js">7.1 server/app.js <a href="#t507.1 server/app.js"> # </a></h3>
<p>server/app.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> express=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;express&apos;</span>);
<span class="hljs-keyword">let</span> app=express();
app.use(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req,res,next</span>) </span>{
    res.header(<span class="hljs-string">&apos;Access-Control-Allow-Methods&apos;</span>,<span class="hljs-string">&apos;PUT,POST,GET,DELETE,OPTIONS&apos;</span>);
    res.header(<span class="hljs-string">&apos;Access-Control-Allow-Origin&apos;</span>,<span class="hljs-string">&apos;http://localhost:8080&apos;</span>);
    res.header(<span class="hljs-string">&apos;Access-Control-Allow-Credentials&apos;</span>,<span class="hljs-string">&apos;true&apos;</span>);
    <span class="hljs-keyword">if</span> (req.method === <span class="hljs-string">&apos;OPTIONS&apos;</span>) {
        <span class="hljs-keyword">return</span> res.sendStatus(<span class="hljs-number">200</span>);
    }
    next();
});
app.listen(<span class="hljs-number">3000</span>);
<span class="hljs-keyword">let</span> sliders=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./mock/sliders&apos;</span>);
app.get(<span class="hljs-string">&apos;/sliders&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req,res</span>) </span>{
    res.json(sliders);
});
<span class="hljs-keyword">let</span> lessons = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./mock/lessons&apos;</span>);
<span class="hljs-comment">// http://getLessons/vue?offset=0&amp;limit=5</span>
app.get(<span class="hljs-string">&apos;/getLessons/:category&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req,res</span>)</span>{
   <span class="hljs-keyword">let</span> category = req.params.category;
   <span class="hljs-keyword">let</span> {offset,limit} = req.query;
   offset = <span class="hljs-built_in">isNaN</span>(offset)?<span class="hljs-number">0</span>:<span class="hljs-built_in">parseInt</span>(offset);<span class="hljs-comment">//&#x504F;&#x79FB;&#x91CF; </span>
   limit = <span class="hljs-built_in">isNaN</span>(limit)?<span class="hljs-number">5</span>:<span class="hljs-built_in">parseInt</span>(limit); <span class="hljs-comment">//&#x6BCF;&#x9875;&#x6761;&#x6570;</span>
   <span class="hljs-keyword">let</span> list = <span class="hljs-built_in">JSON</span>.parse(<span class="hljs-built_in">JSON</span>.stringify(lessons));
   <span class="hljs-keyword">if</span>(category!=<span class="hljs-string">&apos;all&apos;</span>){
     list = list.filter(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span>item.category==category);
   }
   <span class="hljs-keyword">let</span> total = list.length;
   <span class="hljs-comment">//&#x5206;&#x9875;&#x6570;&#x636E;</span>
   list = list.slice(offset,offset+limit);
   <span class="hljs-comment">//list.forEach(item=&gt;item.title= item.title+Math.random());</span>
   setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    res.json({
        list,
        <span class="hljs-attr">hasMore</span>:total&gt;offset+limit
    });
   },<span class="hljs-number">1000</span>);
});
</code></pre>
<h3 id="t517.2 Loading/index.less">7.2 Loading/index.less <a href="#t517.2 Loading/index.less"> # </a></h3>
<p>src/components/Loading/index.less</p>
<pre><code class="lang-less"><span class="hljs-selector-class">.loading</span>{
    <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
    <span class="hljs-attribute">height</span>:<span class="hljs-number">43px</span>;
    <span class="hljs-attribute">line-height</span>: <span class="hljs-number">43px</span>;
    <span class="hljs-attribute">text-align</span>: center;
    <span class="hljs-selector-tag">img</span>{
        <span class="hljs-attribute">height</span>:<span class="hljs-number">43px</span>;
        <span class="hljs-attribute">width</span>:<span class="hljs-number">43px</span>;
    }
}
</code></pre>
<h3 id="t527.3 Loading/index.tsx">7.3 Loading/index.tsx <a href="#t527.3 Loading/index.tsx"> # </a></h3>
<p>src/components/Loading/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>;
declare <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">require</span>(<span class="hljs-params">url: string</span>): <span class="hljs-title">string</span>;
<span class="hljs-title">let</span> <span class="hljs-title">loading</span>=<span class="hljs-title">require</span>(<span class="hljs-params"><span class="hljs-string">&apos;../../images/loading.gif&apos;</span></span>);
<span class="hljs-title">export</span> <span class="hljs-title">interface</span> <span class="hljs-title">Props</span></span>{
    children?: any,
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Loading</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt; </span>{
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;loading&quot;</span>&gt;</span>
                 <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{loading}/</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        );
    }
}
</span></code></pre>
<h3 id="t537.4 HomeLessons/index.tsx">7.4 HomeLessons/index.tsx <a href="#t537.4 HomeLessons/index.tsx"> # </a></h3>
<p>src/containers/Home/HomeLessons/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>;
<span class="hljs-keyword">import</span> Loading <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../../components/Loading&apos;</span>;
<span class="hljs-keyword">import</span> { Link } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router-dom&apos;</span>;
interface Props {
    <span class="hljs-attr">lessons</span>: any,
    <span class="hljs-attr">getLessons</span>:any
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HomeLessons</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt;</span>{
    render(){
        <span class="hljs-keyword">let</span> { <span class="hljs-attr">lessons</span>: { list,hasMore,loading },getLessons} = <span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;home-lessons&quot;</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;all-lessons&quot;</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;iconfont icon-kecheng-copy&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>&#x5168;&#x90E8;&#x8BFE;&#x7A0B;<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                {
                    list.length&gt;0?list.map((item:any,index:number)=&gt;(
                        <span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{index}</span> <span class="hljs-attr">to</span>=<span class="hljs-string">{{pathname:</span>`/<span class="hljs-attr">detail</span>/${<span class="hljs-attr">item.id</span>}`,<span class="hljs-attr">state:item</span>}}&gt;</span>
                            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{index}</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;lesson&quot;</span>&gt;</span>
                                <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{item.poster}/</span>&gt;</span>
                                <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{item.title}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
                                <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{item.price}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
                            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                        <span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span>
                    )):<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;no-data&quot;</span>&gt;</span>&#x6682;&#x65E0;&#x6570;&#x636E;<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                }
                {
                    loading?<span class="hljs-tag">&lt;<span class="hljs-name">Loading</span>/&gt;</span>:(hasMore?<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;loading-more&quot;</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{getLessons}</span> &gt;</span>&#x52A0;&#x8F7D;&#x66F4;&#x591A;<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>:<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;loading-more&quot;</span>&gt;</span>&#x6728;&#x6709;&#x4E86;<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>)
                }
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        )
    }
}
</span></code></pre>
<h3 id="t547.5 Home/index.tsx">7.5 Home/index.tsx <a href="#t547.5 Home/index.tsx"> # </a></h3>
<p>src/containers/Home/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> HomeHeader <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./HomeHeader&apos;</span>;
<span class="hljs-keyword">import</span> actions <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../store/actions/home&apos;</span>;
<span class="hljs-keyword">import</span> { Store} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../store/types&apos;</span>;
<span class="hljs-keyword">import</span> { connect } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-redux&apos;</span>;
<span class="hljs-keyword">import</span> HomeSwiper <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./HomeSwiper&apos;</span>;
<span class="hljs-keyword">import</span> HomeLessons <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./HomeLessons&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>;

<span class="hljs-keyword">export</span> interface Props{
    currentCategory?: any,
    setCurrentCategory?: any,
    <span class="hljs-attr">sliders</span>: any,
    <span class="hljs-attr">getSliders</span>: any,
    <span class="hljs-attr">getLessons</span>: any,
    <span class="hljs-attr">lessons</span>: any,
    <span class="hljs-attr">refreshLessons</span>:any
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Home</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt; </span>{
    mainContent: any
    componentDidMount() {
        <span class="hljs-keyword">this</span>.props.getSliders();
        <span class="hljs-keyword">this</span>.props.getLessons();
    }
    render() {
        <span class="hljs-keyword">let</span> {currentCategory,setCurrentCategory,getLessons,lessons,refreshLessons}=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">return</span> (
            &lt;React.Fragment&gt;
                &lt;HomeHeader
                    currentCategory={currentCategory}
                    setCurrentCategory={setCurrentCategory}
                    refreshLessons={refreshLessons}
                /&gt;
                &lt;div className=&quot;main-content&quot; ref={ref =&gt; this.mainContent=ref}&gt;
                    &lt;HomeSwiper sliders={this.props.sliders} /&gt;
                    &lt;HomeLessons
                      lessons={lessons}
                      getLessons={getLessons}
                  /&gt;
                &lt;/div&gt;
            &lt;/React.Fragment&gt;
        );
    }
}

export default connect(
    (state:Store)=&gt;state.home,
    actions
)(Home);

</code></pre>
<h3 id="t557.6 store/action-types.tsx">7.6 store/action-types.tsx <a href="#t557.6 store/action-types.tsx"> # </a></h3>
<p>src/store/action-types.tsx</p>
<pre><code class="lang-js"><span class="hljs-comment">//&#x5F00;&#x59CB;&#x52A0;&#x8F7D;&#x4E0B;&#x4E00;&#x9875;&#x7684;&#x6570;&#x636E;</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> SET_HOME_LESSONS_LOADING=<span class="hljs-string">&apos;SET_HOME_LESSONS_LOADING&apos;</span>;
<span class="hljs-comment">//&#x8FFD;&#x52A0;&#x4E00;&#x9875;&#x6570;&#x636E;</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> ADD_HOME_LESSONS=<span class="hljs-string">&apos;ADD_HOME_LESSONS&apos;</span>;
<span class="hljs-comment">//&#x91CD;&#x7F6E;&#x8BFE;&#x7A0B;&#x5217;&#x8868;&#x5F00;&#x59CB;</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> REFRESH_HOME_LESSONS_LOADING=<span class="hljs-string">&apos;REFRESH_HOME_LESSONS_LOADING&apos;</span>;
<span class="hljs-comment">//&#x91CD;&#x7F6E;&#x8BFE;&#x7A0B;&#x5217;&#x8868;</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> REFRESH_HOME_LESSONS=<span class="hljs-string">&apos;REFRESH_HOME_LESSONS&apos;</span>;
</code></pre>
<h3 id="t567.7 actions/home.tsx">7.7 actions/home.tsx <a href="#t567.7 actions/home.tsx"> # </a></h3>
<p>src/store/actions/home.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> types <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../action-types&apos;</span>;
<span class="hljs-keyword">import</span> {getSliders,getLessons} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../api/home&apos;</span>;
<span class="hljs-keyword">export</span> interface setCurrentCategory{
    <span class="hljs-attr">type</span>: <span class="hljs-keyword">typeof</span> types.SET_CURRENT_CATEGORY,
    <span class="hljs-attr">currentCategory</span>:string
}
<span class="hljs-keyword">export</span> type Action=any;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    setCurrentCategory(currentCategory:string): setCurrentCategory {
        <span class="hljs-keyword">return</span> { <span class="hljs-attr">type</span>: types.SET_CURRENT_CATEGORY,currentCategory };
    },
    getSliders(){
        <span class="hljs-comment">//&#x8FD9;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#x662F;redux-thunk &#x63D0;&#x4F9B;&#x7684; </span>
        <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">dispatch:any,getState:any</span>)</span>{
            getSliders().then(<span class="hljs-function">(<span class="hljs-params">sliders:any</span>)=&gt;</span>{
                dispatch({<span class="hljs-attr">type</span>:types.SET_HOME_SLIDERS,<span class="hljs-attr">payload</span>:sliders});
            });
        }
    },
    <span class="hljs-comment">//&#x83B7;&#x53D6;&#x4E0B;&#x4E00;&#x9875;&#x7684;&#x8BFE;&#x7A0B;</span>
    getLessons() {
        <span class="hljs-keyword">return</span> <span class="hljs-function">(<span class="hljs-params">dispatch:any,getState:any</span>) =&gt;</span> {
            <span class="hljs-keyword">let</span> {currentCategory,<span class="hljs-attr">lessons</span>: {hasMore,offset,limit,loading}}=getState().home;
            <span class="hljs-keyword">if</span> (hasMore &amp;&amp;!loading) {
                dispatch({<span class="hljs-attr">type</span>:types.SET_HOME_LESSONS_LOADING,<span class="hljs-attr">payload</span>:<span class="hljs-literal">true</span>});
                getLessons(currentCategory,offset,limit).then(<span class="hljs-function"><span class="hljs-params">payload</span> =&gt;</span> {
                    dispatch({<span class="hljs-attr">type</span>: types.ADD_HOME_LESSONS,payload});
                });
            }
        }
    },
    <span class="hljs-comment">//&#x91CD;&#x65B0;&#x83B7;&#x53D6;&#x7B2C;&#x4E00;&#x9875;&#x7684;&#x6570;&#x636E; </span>
    refreshLessons(){
        <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">dispatch:any,getState:any</span>)</span>{
            <span class="hljs-keyword">let</span> {currentCategory,<span class="hljs-attr">lessons</span>: {limit,loading}}=getState().home;
            <span class="hljs-keyword">if</span> (!loading) {
                dispatch({<span class="hljs-attr">type</span>:types.REFRESH_HOME_LESSONS_LOADING});
                getLessons(currentCategory,<span class="hljs-number">0</span>,limit).then(<span class="hljs-function"><span class="hljs-params">payload</span>=&gt;</span>{
                    dispatch({<span class="hljs-attr">type</span>:types.REFRESH_HOME_LESSONS,payload});
                });
            }
        }
    }
}
</code></pre>
<h3 id="t577.8 reducers/home.tsx">7.8 reducers/home.tsx <a href="#t577.8 reducers/home.tsx"> # </a></h3>
<p>src/store/reducers/home.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> types <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../action-types&apos;</span>;
<span class="hljs-keyword">import</span> { Home } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../types&apos;</span>;
<span class="hljs-keyword">import</span> {Action} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../actions/home&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">state: Home={ currentCategory: <span class="hljs-string">&apos;all&apos;</span>,sliders:[],lessons:{loading:false,hasMore:true,list:[],offset:<span class="hljs-number">0</span>} },action: Action</span>): <span class="hljs-title">Home</span> </span>{
    <span class="hljs-keyword">switch</span> (action.type) {
        <span class="hljs-keyword">case</span> types.SET_CURRENT_CATEGORY:
            <span class="hljs-keyword">return</span> { ...state,<span class="hljs-attr">currentCategory</span>: action.currentCategory };
        <span class="hljs-keyword">case</span> types.SET_HOME_SLIDERS:
            <span class="hljs-keyword">return</span> { ...state,<span class="hljs-attr">sliders</span>: action.payload };
        <span class="hljs-keyword">case</span> types.SET_HOME_LESSONS_LOADING:
            <span class="hljs-keyword">return</span> {...state,<span class="hljs-attr">lessons</span>:{
                    ...state.lessons,
                    <span class="hljs-attr">loading</span>:action.payload
            }};
        <span class="hljs-keyword">case</span> types.ADD_HOME_LESSONS:<span class="hljs-comment">//&#x589E;&#x52A0;&#x4E00;&#x9875;&#x6570;&#x636E;</span>
            <span class="hljs-keyword">return</span> {...state,<span class="hljs-attr">lessons</span>:{
                ...state.lessons,
                <span class="hljs-attr">list</span>:[...state.lessons.list,...action.payload.list],
                <span class="hljs-attr">hasMore</span>:action.payload.hasMore,
                <span class="hljs-attr">offset</span>:state.lessons.offset+action.payload.list.length,
                <span class="hljs-attr">loading</span>:<span class="hljs-literal">false</span>
            }
            }; 
        <span class="hljs-keyword">case</span> types.REFRESH_HOME_LESSONS_LOADING:
            <span class="hljs-keyword">return</span> {...state,<span class="hljs-attr">lessons</span>:{
                ...state.lessons,
                <span class="hljs-attr">list</span>:[],
                <span class="hljs-attr">hasMore</span>:<span class="hljs-literal">true</span>,
                <span class="hljs-attr">offset</span>:<span class="hljs-number">0</span>,
                <span class="hljs-attr">loading</span>:<span class="hljs-literal">true</span>
            }}; 
        <span class="hljs-keyword">case</span> types.REFRESH_HOME_LESSONS:<span class="hljs-comment">//&#x5237;&#x65B0;&#x8BFE;&#x7A0B;&#x6570;&#x636E;</span>
            <span class="hljs-keyword">return</span> {...state,<span class="hljs-attr">lessons</span>:{
                ...state.lessons,
                <span class="hljs-attr">list</span>:action.payload.list,
                <span class="hljs-attr">hasMore</span>:action.payload.hasMore,
                <span class="hljs-attr">offset</span>:action.payload.list.length,
                <span class="hljs-attr">loading</span>:<span class="hljs-literal">false</span>
            }}; 
        <span class="hljs-keyword">default</span>:
            <span class="hljs-keyword">return</span> state;
    }
}
</code></pre>
<h3 id="t587.9 HomeHeader/index.tsx">7.9 HomeHeader/index.tsx <a href="#t587.9 HomeHeader/index.tsx"> # </a></h3>
<p>src/containers/Home/HomeHeader/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>
<span class="hljs-keyword">import</span> { CSSTransition,TransitionGroup } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-transition-group&apos;</span>;
declare <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">require</span>(<span class="hljs-params">url: string</span>): <span class="hljs-title">string</span>;
<span class="hljs-title">const</span> <span class="hljs-title">logo</span>=<span class="hljs-title">require</span>(<span class="hljs-params"><span class="hljs-string">&apos;../../../common/images/logo.png&apos;</span></span>);
<span class="hljs-title">export</span> <span class="hljs-title">interface</span> <span class="hljs-title">Props</span></span>{
    currentCategory?: any,
    setCurrentCategory?: any,
    <span class="hljs-attr">refreshLessons</span>:any
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HomeHeader</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt; </span>{
    state={
        <span class="hljs-attr">showList</span>:<span class="hljs-literal">false</span>
    }
    setCurrentCategory=<span class="hljs-function">(<span class="hljs-params">event:any</span>) =&gt;</span> {
        <span class="hljs-keyword">let</span> category=event.target.dataset.category;
        <span class="hljs-keyword">this</span>.props.setCurrentCategory(category);
        <span class="hljs-keyword">this</span>.setState({ <span class="hljs-attr">showList</span>: <span class="hljs-literal">false</span> },<span class="hljs-keyword">this</span>.props.refreshLessons);

    }
    render() {
        <span class="hljs-keyword">let</span> {currentCategory}=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;home-header&quot;</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;header-menu&quot;</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{logo}</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;logo&quot;</span> /&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =&gt;</span> this.setState({showList:!this.state.showList})}&gt;
                        {
                            this.state.showList?<span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;iconfont icon-guanbi&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>:<span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;iconfont icon-uilist&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
                        }
                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">TransitionGroup</span>&gt;</span>
                        {
                            this.state.showList&amp;&amp;<span class="hljs-tag">&lt;<span class="hljs-name">CSSTransition</span>
                                  <span class="hljs-attr">timeout</span>=<span class="hljs-string">{500}</span>
                                  <span class="hljs-attr">classNames</span>=<span class="hljs-string">&quot;fade&quot;</span>
                        &gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;menu-list&quot;</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.setCurrentCategory}</span>&gt;</span>
                                    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-category</span>=<span class="hljs-string">&quot;react&quot;</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{currentCategory</span>==<span class="hljs-string">&apos;react&apos;</span>?&apos;<span class="hljs-attr">active</span>&apos;<span class="hljs-attr">:</span>&apos;&apos;}&gt;</span>React<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
                                    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-category</span>=<span class="hljs-string">&quot;vue&quot;</span>  <span class="hljs-attr">className</span>=<span class="hljs-string">{currentCategory</span>==<span class="hljs-string">&apos;vue&apos;</span>?&apos;<span class="hljs-attr">active</span>&apos;<span class="hljs-attr">:</span>&apos;&apos;}&gt;</span>Vue<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
                                <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">CSSTransition</span>&gt;</span>
                        }
                <span class="hljs-tag">&lt;/<span class="hljs-name">TransitionGroup</span>&gt;</span>    
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        );
    }
}
</span></code></pre>
<h3 id="t597.10">7.10 <a href="#t597.10"> # </a></h3>
<pre><code class="lang-js">
</code></pre>
<h3 id="t607.11 HomeSwiper/index.tsx">7.11 HomeSwiper/index.tsx <a href="#t607.11 HomeSwiper/index.tsx"> # </a></h3>
<p>src/containers/Home/HomeSwiper/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> ReactSwipe <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-swipe&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>;
interface Props{
    <span class="hljs-attr">sliders</span>:any
}
<span class="hljs-keyword">export</span> interface State{
    <span class="hljs-attr">index</span>:number
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Swiper</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>,<span class="hljs-title">State</span>&gt; </span>{
    state={ <span class="hljs-attr">index</span>:<span class="hljs-number">0</span>}
    render() {
        <span class="hljs-keyword">let</span> options={
            <span class="hljs-attr">continuous</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">auto</span>: <span class="hljs-number">3000</span>,
            <span class="hljs-attr">callback</span>: <span class="hljs-function">(<span class="hljs-params">index: number</span>) =&gt;</span> {
                <span class="hljs-keyword">this</span>.setState({index});
            }
        }
        <span class="hljs-keyword">let</span> swiper=(
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">ReactSwipe</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;carousel&quot;</span> <span class="hljs-attr">swipeOptions</span>=<span class="hljs-string">{options}</span>&gt;</span>
                {this.props.sliders.map((item:string,index:number) =&gt; (
                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{index}</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{item}/</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                ))}
            <span class="hljs-tag">&lt;/<span class="hljs-name">ReactSwipe</span>&gt;</span>
        )
        return (
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;home-sliders&quot;</span>&gt;</span>
                {this.props.sliders.length&gt;0? swiper:null}
                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;dots&quot;</span>&gt;</span>
                    {
                        this.props.sliders.map((item:string,index:number) =&gt; (
                            <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{index}</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{</span>`<span class="hljs-attr">dot</span> ${<span class="hljs-attr">this.state.index</span> ==<span class="hljs-string">index?</span>&apos;<span class="hljs-attr">active</span>&apos;<span class="hljs-attr">:</span>&apos;&apos;}`}&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
                        ))
                    }
                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        );
    }
}
</span></code></pre>
<h2 id="t618. &#x4E0A;&#x62C9;&#x52A0;&#x8F7D;">8. &#x4E0A;&#x62C9;&#x52A0;&#x8F7D; <a href="#t618. &#x4E0A;&#x62C9;&#x52A0;&#x8F7D;"> # </a></h2>
<h3 id="t628.1 Home/index.tsx">8.1 Home/index.tsx <a href="#t628.1 Home/index.tsx"> # </a></h3>
<p>src/containers/Home/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> HomeHeader <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./HomeHeader&apos;</span>;
<span class="hljs-keyword">import</span> actions <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../store/actions/home&apos;</span>;
<span class="hljs-keyword">import</span> { Store} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../store/types&apos;</span>;
<span class="hljs-keyword">import</span> { connect } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-redux&apos;</span>;
<span class="hljs-keyword">import</span> HomeSwiper <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./HomeSwiper&apos;</span>;
<span class="hljs-keyword">import</span> HomeLessons <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./HomeLessons&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>;
<span class="hljs-keyword">import</span> {loadMore,downReferesh} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../utils&apos;</span>;
<span class="hljs-keyword">export</span> interface Props{
    currentCategory?: any,
    setCurrentCategory?: any,
    <span class="hljs-attr">sliders</span>: any,
    <span class="hljs-attr">getSliders</span>: any,
    <span class="hljs-attr">getLessons</span>: any,
    <span class="hljs-attr">lessons</span>: any,
    <span class="hljs-attr">refreshLessons</span>:any
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Home</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt; </span>{
    mainContent: any
    componentDidMount() {
        <span class="hljs-keyword">this</span>.props.getSliders();
        <span class="hljs-keyword">this</span>.props.getLessons();
        loadMore(<span class="hljs-keyword">this</span>.mainContent,<span class="hljs-keyword">this</span>.props.getLessons);
        downReferesh(<span class="hljs-keyword">this</span>.mainContent,<span class="hljs-keyword">this</span>.props.refreshLessons);
    }
    render() {
        <span class="hljs-keyword">let</span> {currentCategory,setCurrentCategory,getLessons,lessons,refreshLessons}=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">return</span> (
            &lt;React.Fragment&gt;
                &lt;HomeHeader
                    currentCategory={currentCategory}
                    setCurrentCategory={setCurrentCategory}
                    refreshLessons={refreshLessons}
                /&gt;
                &lt;div className=&quot;main-content&quot; ref={ref =&gt; this.mainContent=ref}&gt;
                    &lt;HomeSwiper sliders={this.props.sliders} /&gt;
                    &lt;HomeLessons
                      lessons={lessons}
                      getLessons={getLessons}
                  /&gt;
                &lt;/div&gt;
            &lt;/React.Fragment&gt;
        );
    }
}

export default connect(
    (state:Store)=&gt;state.home,
    actions
)(Home);

</code></pre>
<h3 id="t638.2 src/utils.tsx">8.2 src/utils.tsx <a href="#t638.2 src/utils.tsx"> # </a></h3>
<p>src/utils.tsx</p>
<pre><code class="lang-js"><span class="hljs-comment">//ele &#x8981;&#x5B9E;&#x73B0;&#x6B64;&#x529F;&#x80FD;DOM&#x5BF9;&#x8C61; callback&#x52A0;&#x8F7D;&#x66F4;&#x591A;&#x7684;&#x65B9;&#x6CD5;</span>
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">loadMore</span>(<span class="hljs-params">element:any,callback:any</span>)</span>{
    <span class="hljs-keyword">let</span> timer:any;
    element.addEventListener(<span class="hljs-string">&apos;scroll&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
        timer&amp;&amp;clearTimeout(timer);
        timer = setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
            <span class="hljs-keyword">let</span> clientHeight = element.clientHeight;
            <span class="hljs-keyword">let</span> scrollTop = element.scrollTop;
            <span class="hljs-keyword">let</span> scrollHeight = element.scrollHeight;
            <span class="hljs-keyword">if</span>(clientHeight+scrollTop+<span class="hljs-number">10</span> &gt;= scrollHeight){
                callback();
            }
        },<span class="hljs-number">300</span>);
    });
}
<span class="hljs-comment">//&#x4E0B;&#x62C9;&#x5237;&#x65B0;</span>
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">downReferesh</span>(<span class="hljs-params">element:any,callback:any</span>)</span>{
      <span class="hljs-keyword">let</span> startY:number;<span class="hljs-comment">//&#x521A;&#x6309;&#x4E0B;&#x7684;&#x65F6;&#x5019;&#x521D;&#x59CB;&#x7EB5;&#x5750;&#x6807;</span>
      <span class="hljs-keyword">let</span> distance:number;<span class="hljs-comment">//&#x4E0B;&#x62C9;&#x7684;&#x8DDD;&#x79BB;</span>
      <span class="hljs-keyword">let</span> originTop=element.offsetTop;<span class="hljs-comment">//&#x6700;&#x521D;&#x7684;&#x8DDD;&#x79BB;&#x7236;&#x7EA7;&#x9876;&#x90E8;&#x7684;&#x8DDD;&#x79BB;</span>
   element.addEventListener(<span class="hljs-string">&apos;touchstart&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event:any</span>)</span>{
      <span class="hljs-keyword">if</span>(element.offsetTop == originTop &amp;&amp; element.scrollTop ==<span class="hljs-number">0</span>){
        startY= event.touches[<span class="hljs-number">0</span>].pageY;
        element.addEventListener(<span class="hljs-string">&apos;touchmove&apos;</span>,touchMove);
        element.addEventListener(<span class="hljs-string">&apos;touchend&apos;</span>,touchEnd);
      } 

      <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">touchMove</span>(<span class="hljs-params">event:any</span>)</span>{
        <span class="hljs-keyword">let</span> pageY = event.touches[<span class="hljs-number">0</span>].pageY;
        <span class="hljs-keyword">if</span>(pageY &gt; startY){<span class="hljs-comment">//&#x5982;&#x679C;&#x8D8A;&#x6765;&#x8D8A;&#x5927;&#xFF0C;&#x8868;&#x793A;&#x4E0B;&#x62C9;</span>
            distance = pageY - startY;
            element.style.top = originTop+distance+<span class="hljs-string">&apos;px&apos;</span>;
        }<span class="hljs-keyword">else</span>{
            element.removeEventListener(<span class="hljs-string">&apos;touchmove&apos;</span>,touchMove);
            element.removeEventListener(<span class="hljs-string">&apos;touchend&apos;</span>,touchEnd);
        }
      }
      <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">touchEnd</span>(<span class="hljs-params"></span>)</span>{
        element.removeEventListener(<span class="hljs-string">&apos;touchmove&apos;</span>,touchMove);
        element.removeEventListener(<span class="hljs-string">&apos;touchend&apos;</span>,touchEnd);
         <span class="hljs-keyword">let</span> timer = setInterval(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
            <span class="hljs-keyword">if</span>(distance&lt;<span class="hljs-number">1</span>){
                element.style.top = originTop+<span class="hljs-string">&apos;px&apos;</span>;<span class="hljs-comment">//11.5</span>
                clearInterval(timer);
            }<span class="hljs-keyword">else</span>{
                element.style.top = originTop+(--distance)+<span class="hljs-string">&apos;px&apos;</span>;
            }
        },<span class="hljs-number">13</span>);
        <span class="hljs-keyword">if</span>(distance&gt;<span class="hljs-number">30</span>){
            callback();
        }
      }
   });
}
</code></pre>
<h2 id="t649. &#x8BFE;&#x7A0B;&#x8BE6;&#x60C5;">9. &#x8BFE;&#x7A0B;&#x8BE6;&#x60C5; <a href="#t649. &#x8BFE;&#x7A0B;&#x8BE6;&#x60C5;"> # </a></h2>
<h3 id="t659.1 src/index.tsx">9.1 src/index.tsx <a href="#t659.1 src/index.tsx"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-dom&apos;</span>;
<span class="hljs-keyword">import</span> Home <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./containers/Home&apos;</span>;
<span class="hljs-keyword">import</span> Detail <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./containers/Detail&apos;</span>;
<span class="hljs-keyword">import</span> Profile <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./containers/Profile&apos;</span>;
<span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./containers/App&apos;</span>;
<span class="hljs-keyword">import</span> { Provider } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-redux&apos;</span>;
<span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./store&apos;</span>;
<span class="hljs-keyword">import</span> {Route } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router-dom&apos;</span>;
<span class="hljs-keyword">import</span> { ConnectedRouter } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;connected-react-router&apos;</span>
<span class="hljs-keyword">import</span> history <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./store/history&apos;</span>;
ReactDOM.render((
    &lt;Provider store={store}&gt;
        &lt;ConnectedRouter history={history}&gt;
            &lt;App&gt;
                &lt;Route exact path=&quot;/&quot; component={Home} /&gt;
                &lt;Route path=&quot;/detail/:id&quot; component={Detail} /&gt;
                &lt;Route path=&quot;/profile&quot; component={Profile}/&gt;
            &lt;/App&gt;
        &lt;/ConnectedRouter&gt;
    &lt;/Provider&gt;
),document.getElementById(&apos;root&apos;));
</code></pre>
<h3 id="t669.2 NavHeader/index.tsx">9.2 NavHeader/index.tsx <a href="#t669.2 NavHeader/index.tsx"> # </a></h3>
<p>src/components/NavHeader/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>;
interface Props{
    <span class="hljs-attr">history</span>: any,
    <span class="hljs-attr">title</span>: string
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">NavHeader</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt;</span>{
    render(){
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;navheader&quot;</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-name">i</span> 
              <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span>=&gt;</span>this.props.history.goBack()}
              className=&quot;iconfont icon-fanhui&quot;&gt;<span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
                {this.props.title}
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
        )
    }
}

</code></pre>
<h3 id="t679.3 NavHeader/index.less">9.3 NavHeader/index.less <a href="#t679.3 NavHeader/index.less"> # </a></h3>
<p>src/components/NavHeader/index.less</p>
<pre><code class="lang-less"><span class="hljs-selector-class">.navheader</span>{
    <span class="hljs-attribute">height</span>:<span class="hljs-number">56px</span>;
    <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#000</span>;
    <span class="hljs-attribute">color</span>:<span class="hljs-number">#FFF</span>;
    <span class="hljs-attribute">line-height</span>: <span class="hljs-number">56px</span>;
    <span class="hljs-attribute">text-align</span>: center;
    <span class="hljs-attribute">position</span>: fixed;
    <span class="hljs-attribute">top</span>:<span class="hljs-number">0</span>;
    <span class="hljs-attribute">left</span>:<span class="hljs-number">0</span>;
    <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
    <span class="hljs-selector-tag">i</span>{
        <span class="hljs-attribute">position</span>: absolute;
        <span class="hljs-attribute">left</span>:<span class="hljs-number">10px</span>;
    }
}
</code></pre>
<h3 id="t689.4 Detail/index.tsx">9.4 Detail/index.tsx <a href="#t689.4 Detail/index.tsx"> # </a></h3>
<p>src/containers/Detail/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> NavHeader <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../components/NavHeader&apos;</span>;
<span class="hljs-keyword">import</span> {Redirect} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router-dom&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>;
interface Props{
    <span class="hljs-attr">location</span>: any,
    <span class="hljs-attr">history</span>:any,
    <span class="hljs-attr">match</span>:any
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Detail</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt;</span>{
    state = {
        <span class="hljs-attr">lesson</span>:<span class="hljs-keyword">this</span>.props.location.state||{}
    }

    render(){
        <span class="hljs-keyword">let</span> { lesson }=<span class="hljs-keyword">this</span>.state;
        <span class="hljs-keyword">return</span> (
            lesson?(
                &lt;div className=&quot;lesson-detail&quot;&gt;
                    &lt;NavHeader title=&quot;&#x8BFE;&#x7A0B;&#x8BE6;&#x60C5;&quot; history={this.props.history} /&gt;
                    &lt;img src={lesson.poster}/&gt;
                    &lt;p&gt;{lesson.title}&lt;/p&gt;
                    &lt;p&gt;{lesson.price}&lt;/p&gt;
                &lt;/div&gt;
            ):&lt;Redirect to=&quot;/&quot;/&gt;

        )
    }
}
</code></pre>
<h3 id="t699.5 Detail/index.less">9.5 Detail/index.less <a href="#t699.5 Detail/index.less"> # </a></h3>
<p>src/containers/Detail/index.less</p>
<pre><code class="lang-less"><span class="hljs-selector-class">.lesson-detail</span>{
    <span class="hljs-attribute">padding-top</span>:<span class="hljs-number">56px</span>;
    <span class="hljs-selector-tag">img</span>{
        <span class="hljs-attribute">height</span>:<span class="hljs-number">167px</span>;
        <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
    }
    <span class="hljs-selector-tag">p</span>{
       <span class="hljs-attribute">text-align</span>: center;
       <span class="hljs-attribute">line-height</span>:<span class="hljs-number">34px</span>;
       <span class="hljs-attribute">height</span>:<span class="hljs-number">34px</span>;
       <span class="hljs-selector-tag">&amp;</span><span class="hljs-selector-pseudo">:nth-child(2)</span>{
           <span class="hljs-attribute">color</span>:<span class="hljs-number">#CCC</span>;
       } 
       <span class="hljs-selector-tag">&amp;</span><span class="hljs-selector-pseudo">:nth-child(2)</span>{
        <span class="hljs-attribute">color</span>:<span class="hljs-number">#F00</span>;
    } 
    }
}
</code></pre>
<h2 id="t7010. &#x8BB0;&#x4F4F;&#x6EDA;&#x52A8;&#x6761;&#x4F4D;&#x7F6E;">10. &#x8BB0;&#x4F4F;&#x6EDA;&#x52A8;&#x6761;&#x4F4D;&#x7F6E; <a href="#t7010. &#x8BB0;&#x4F4F;&#x6EDA;&#x52A8;&#x6761;&#x4F4D;&#x7F6E;"> # </a></h2>
<h3 id="t7110.1 Home/index.tsx">10.1 Home/index.tsx <a href="#t7110.1 Home/index.tsx"> # </a></h3>
<p>src/containers/Home/index.tsx</p>
<pre><code class="lang-js">componentDidMount() {
        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.props.lessons.list.length == <span class="hljs-number">0</span>) {
            <span class="hljs-keyword">this</span>.props.getSliders();
            <span class="hljs-keyword">this</span>.props.getLessons();
        } <span class="hljs-keyword">else</span> {
            <span class="hljs-keyword">this</span>.mainContent.scrollTop=store.get(<span class="hljs-string">&apos;scrollTop&apos;</span>);
        }
        loadMore(<span class="hljs-keyword">this</span>.mainContent,<span class="hljs-keyword">this</span>.props.getLessons);
        downReferesh(<span class="hljs-keyword">this</span>.mainContent,<span class="hljs-keyword">this</span>.props.refreshLessons);
    }
componentWillUnmount() {
        store.set(<span class="hljs-string">&apos;scrollTop&apos;</span>,<span class="hljs-keyword">this</span>.mainContent.scrollTop);
}
</code></pre>
<h3 id="t7210.2 src/utils.tsx">10.2 src/utils.tsx <a href="#t7210.2 src/utils.tsx"> # </a></h3>
<p>src/utils.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> store =  {
    set(key:string,<span class="hljs-attr">val</span>:string) {
        sessionStorage.setItem(key,val);
    },
    get(key:string) {
        <span class="hljs-keyword">return</span> sessionStorage.getItem(key);
    }
}
</code></pre>
<h2 id="t7311. &#x4E2A;&#x4EBA;&#x4E2D;&#x5FC3;">11. &#x4E2A;&#x4EBA;&#x4E2D;&#x5FC3; <a href="#t7311. &#x4E2A;&#x4EBA;&#x4E2D;&#x5FC3;"> # </a></h2>
<h3 id="t7411.1 Profile/index.tsx">11.1 Profile/index.tsx <a href="#t7411.1 Profile/index.tsx"> # </a></h3>
<p>src/containers/Profile/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>
<span class="hljs-keyword">import</span> { Link } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router-dom&apos;</span>;
declare <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">require</span>(<span class="hljs-params">url: string</span>): <span class="hljs-title">string</span>;
<span class="hljs-title">let</span> <span class="hljs-title">profile</span>=<span class="hljs-title">require</span>(<span class="hljs-params"><span class="hljs-string">&apos;../../images/profile.png&apos;</span></span>);
<span class="hljs-title">export</span> <span class="hljs-title">default</span> <span class="hljs-title">class</span> <span class="hljs-title">Profile</span> <span class="hljs-title">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;profile&quot;</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;profile-bg&quot;</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{profile}/</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;login-btn&quot;</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/login&quot;</span>&gt;</span>&#x767B;&#x5F55;<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        )
    }
}
</span></code></pre>
<h3 id="t7511.2 Profile/index.less">11.2 Profile/index.less <a href="#t7511.2 Profile/index.less"> # </a></h3>
<p>src/containers/Profile/index.less</p>
<pre><code class="lang-less"><span class="hljs-selector-class">.profile</span>{
    <span class="hljs-selector-class">.profile-bg</span>{
        <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
        <span class="hljs-attribute">height</span>:<span class="hljs-number">223px</span>;
        <span class="hljs-attribute">background-image</span>: url(<span class="hljs-string">../../images/login_bg.png</span>);
        <span class="hljs-attribute">background-size</span>:contain;
        <span class="hljs-attribute">display</span>:flex;
        <span class="hljs-attribute">flex-direction</span>: column;
        <span class="hljs-attribute">justify-content</span>: center;
        <span class="hljs-attribute">align-items</span>: center;
        <span class="hljs-selector-tag">img</span>{
            <span class="hljs-attribute">width</span>:<span class="hljs-number">60px</span>;
            <span class="hljs-attribute">height</span>:<span class="hljs-number">60px</span>;
            <span class="hljs-attribute">border-radius</span>:<span class="hljs-number">50%</span>;
        } 
        <span class="hljs-selector-class">.login-btn</span>{
            <span class="hljs-attribute">width</span>:<span class="hljs-number">60px</span>;
            <span class="hljs-attribute">height</span>:<span class="hljs-number">25px</span>;
            <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;
            <span class="hljs-attribute">background</span>:<span class="hljs-number">#FFF</span>;
            <span class="hljs-attribute">color</span>:<span class="hljs-number">#188AE4</span>;
            <span class="hljs-attribute">line-height</span>:<span class="hljs-number">25px</span>;
            <span class="hljs-attribute">text-align</span>:center;
            <span class="hljs-attribute">font-size</span>:<span class="hljs-number">13px</span>;
            <span class="hljs-attribute">font-weight</span>: bold;
            <span class="hljs-attribute">margin-top</span>:<span class="hljs-number">10px</span>;
            <span class="hljs-selector-tag">a</span>{
                <span class="hljs-attribute">text-decoration</span>: none;
                <span class="hljs-selector-tag">&amp;</span><span class="hljs-selector-pseudo">:link</span>{
                    <span class="hljs-attribute">text-decoration</span>: none;
                    <span class="hljs-attribute">color</span>:<span class="hljs-number">#188AE4</span>;
                }
            }
        }
    }
}
</code></pre>
<h2 id="t7612.&#x767B;&#x5F55;">12.&#x767B;&#x5F55; <a href="#t7612.&#x767B;&#x5F55;"> # </a></h2>
<h3 id="t7712.1 src/index.tsx">12.1 src/index.tsx <a href="#t7712.1 src/index.tsx"> # </a></h3>
<p>src/index.tsx</p>
<pre><code class="lang-diff"><span class="hljs-addition">+ &lt;Route path=&quot;/login&quot; component={Login}/&gt;</span>
</code></pre>
<h3 id="t7812.2 Login/index.tsx">12.2 Login/index.tsx <a href="#t7812.2 Login/index.tsx"> # </a></h3>
<p>src/containers/Login/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>
<span class="hljs-keyword">import</span> {Link} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router-dom&apos;</span>;
<span class="hljs-keyword">import</span> NavHeader <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../components/NavHeader&apos;</span>;
declare <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">require</span>(<span class="hljs-params">url: string</span>): <span class="hljs-title">string</span>;
<span class="hljs-title">let</span> <span class="hljs-title">profile</span>=<span class="hljs-title">require</span>(<span class="hljs-params"><span class="hljs-string">&apos;../../images/profile.png&apos;</span></span>);
<span class="hljs-title">interface</span> <span class="hljs-title">Props</span></span>{
    history:any
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Login</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt;</span>{
    render() {
        <span class="hljs-keyword">return</span> (
            &lt;div className=&quot;login-panel&quot;&gt;
                &lt;NavHeader title=&quot;&#x767B;&#x5F55;&quot; history={this.props.history} /&gt;
                &lt;div className=&quot;login-logo&quot;&gt;
                  &lt;img  src={profile} /&gt;
                &lt;/div&gt;
                &lt;input type=&quot;text&quot; placeholder=&quot;&#x624B;&#x673A;&#x53F7;&quot; /&gt;
                &lt;input type=&quot;text&quot; placeholder=&quot;&#x5BC6;&#x7801;&quot; /&gt;
                &lt;Link to=&quot;/reg&quot;&gt;&#x524D;&#x5F80;&#x6CE8;&#x518C;&lt;/Link&gt;
                &lt;button&gt;&#x767B;&amp;nbsp;&#x5F55;&lt;/button&gt;
            &lt;/div&gt;
        )
    }
}
</code></pre>
<h3 id="t7912.3 Login/index.less">12.3 Login/index.less <a href="#t7912.3 Login/index.less"> # </a></h3>
<p>src/containers/Login/index.less</p>
<pre><code class="lang-less"><span class="hljs-selector-class">.login-panel</span>{
    <span class="hljs-attribute">padding</span>:<span class="hljs-number">56px</span> <span class="hljs-number">17px</span>;
    <span class="hljs-attribute">display</span>:flex;
    <span class="hljs-attribute">flex-direction</span>: column;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">top</span>:<span class="hljs-number">0</span>;
    <span class="hljs-attribute">left</span>:<span class="hljs-number">0</span>;
    <span class="hljs-attribute">right</span>:<span class="hljs-number">0</span>;
    <span class="hljs-attribute">bottom</span>:<span class="hljs-number">0</span>;
    <span class="hljs-attribute">background</span>:<span class="hljs-number">#FFF</span>;
    <span class="hljs-attribute">z-index</span>: <span class="hljs-number">20</span>;

    <span class="hljs-selector-class">.login-logo</span>{
        <span class="hljs-attribute">display</span>:flex;
        <span class="hljs-attribute">height</span>:<span class="hljs-number">223px</span>;
        <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
        <span class="hljs-attribute">justify-content</span>: center;
        <span class="hljs-attribute">align-items</span>: center;
        <span class="hljs-selector-tag">img</span>{
            <span class="hljs-attribute">height</span>:<span class="hljs-number">62px</span>;
            <span class="hljs-attribute">width</span>:<span class="hljs-number">62px</span>;
        }
    }
    <span class="hljs-selector-tag">input</span>{
        <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
        <span class="hljs-attribute">outline</span>:none;
        <span class="hljs-attribute">border</span>:<span class="hljs-number">1px</span> solid <span class="hljs-number">#CCC</span>;
        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">5px</span>;
        <span class="hljs-attribute">height</span>:<span class="hljs-number">42px</span>;
        <span class="hljs-attribute">margin-bottom</span>:<span class="hljs-number">20px</span>;
        <span class="hljs-attribute">padding-left</span>:<span class="hljs-number">10px</span>;
        <span class="hljs-attribute">box-sizing</span>: border-box;
    }
    <span class="hljs-selector-tag">a</span>{
        <span class="hljs-attribute">color</span>:<span class="hljs-number">#188AE4</span>;
        <span class="hljs-attribute">margin-bottom</span>:<span class="hljs-number">20px</span>;
    }
    <span class="hljs-selector-tag">button</span>{
        <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#188AE4</span>;
        <span class="hljs-attribute">color</span>:<span class="hljs-number">#FFF</span>;
        <span class="hljs-attribute">height</span>:<span class="hljs-number">40px</span>;
        <span class="hljs-attribute">line-height</span>: <span class="hljs-number">40px</span>;
        <span class="hljs-attribute">text-align</span>:center;
        <span class="hljs-attribute">font-size</span>:<span class="hljs-number">16px</span>;
        <span class="hljs-attribute">border-radius</span>:<span class="hljs-number">5px</span>;
    }
}
</code></pre>
<h2 id="t8013.&#x6CE8;&#x518C;">13.&#x6CE8;&#x518C; <a href="#t8013.&#x6CE8;&#x518C;"> # </a></h2>
<h3 id="t8113.1 src/index.tsx">13.1 src/index.tsx <a href="#t8113.1 src/index.tsx"> # </a></h3>
<pre><code class="lang-diff">&lt;Route path=&quot;/reg&quot; component={Reg}/&gt;
</code></pre>
<h3 id="t8213.2 Reg/index.tsx">13.2 Reg/index.tsx <a href="#t8213.2 Reg/index.tsx"> # </a></h3>
<p>src/containers/Reg/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>
<span class="hljs-keyword">import</span> {Link} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router-dom&apos;</span>;
<span class="hljs-keyword">import</span> NavHeader <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../components/NavHeader&apos;</span>;
declare <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">require</span>(<span class="hljs-params">url: string</span>): <span class="hljs-title">string</span>;
<span class="hljs-title">let</span> <span class="hljs-title">profile</span>=<span class="hljs-title">require</span>(<span class="hljs-params"><span class="hljs-string">&apos;../../images/profile.png&apos;</span></span>);
<span class="hljs-title">interface</span> <span class="hljs-title">Props</span></span>{
    history:any
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Login</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt;</span>{
    render() {
        <span class="hljs-keyword">return</span> (
            &lt;div className=&quot;login-panel&quot;&gt;
                &lt;NavHeader title=&quot;&#x6CE8;&#x518C;&quot; history={this.props.history}/&gt;
                &lt;div className=&quot;login-logo&quot;&gt;
                  &lt;img  src={profile} /&gt;
                &lt;/div&gt;
                &lt;input type=&quot;text&quot; placeholder=&quot;&#x624B;&#x673A;&#x53F7;&quot; /&gt;
                &lt;input type=&quot;text&quot; placeholder=&quot;&#x5BC6;&#x7801;&quot; /&gt;
                &lt;Link to=&quot;/login&quot;&gt;&#x524D;&#x5F80;&#x767B;&#x5F55;&lt;/Link&gt;
                &lt;button&gt;&#x6CE8;&amp;nbsp;&#x518C;&lt;/button&gt;
            &lt;/div&gt;
        )
    }
}
</code></pre>
<h3 id="t8313.3 Reg/index.less">13.3 Reg/index.less <a href="#t8313.3 Reg/index.less"> # </a></h3>
<p>src/containers/Reg/index.less</p>
<pre><code class="lang-less"><span class="hljs-selector-class">.login-panel</span>{
    <span class="hljs-attribute">padding</span>:<span class="hljs-number">56px</span> <span class="hljs-number">17px</span>;
    <span class="hljs-attribute">display</span>:flex;
    <span class="hljs-attribute">flex-direction</span>: column;
    <span class="hljs-attribute">position</span>: absolute;
    <span class="hljs-attribute">top</span>:<span class="hljs-number">0</span>;
    <span class="hljs-attribute">left</span>:<span class="hljs-number">0</span>;
    <span class="hljs-attribute">right</span>:<span class="hljs-number">0</span>;
    <span class="hljs-attribute">bottom</span>:<span class="hljs-number">0</span>;
    <span class="hljs-attribute">background</span>:<span class="hljs-number">#FFF</span>;
    <span class="hljs-attribute">z-index</span>: <span class="hljs-number">20</span>;

    <span class="hljs-selector-class">.login-logo</span>{
        <span class="hljs-attribute">display</span>:flex;
        <span class="hljs-attribute">height</span>:<span class="hljs-number">223px</span>;
        <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
        <span class="hljs-attribute">justify-content</span>: center;
        <span class="hljs-attribute">align-items</span>: center;
        <span class="hljs-selector-tag">img</span>{
            <span class="hljs-attribute">height</span>:<span class="hljs-number">62px</span>;
            <span class="hljs-attribute">width</span>:<span class="hljs-number">62px</span>;
        }
    }
    <span class="hljs-selector-tag">input</span>{
        <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
        <span class="hljs-attribute">outline</span>:none;
        <span class="hljs-attribute">border</span>:<span class="hljs-number">1px</span> solid <span class="hljs-number">#CCC</span>;
        <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">5px</span>;
        <span class="hljs-attribute">height</span>:<span class="hljs-number">42px</span>;
        <span class="hljs-attribute">margin-bottom</span>:<span class="hljs-number">20px</span>;
        <span class="hljs-attribute">padding-left</span>:<span class="hljs-number">10px</span>;
        <span class="hljs-attribute">box-sizing</span>: border-box;
    }
    <span class="hljs-selector-tag">a</span>{
        <span class="hljs-attribute">color</span>:<span class="hljs-number">#188AE4</span>;
        <span class="hljs-attribute">margin-bottom</span>:<span class="hljs-number">20px</span>;
    }
    <span class="hljs-selector-tag">button</span>{
        <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;
        <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#188AE4</span>;
        <span class="hljs-attribute">color</span>:<span class="hljs-number">#FFF</span>;
        <span class="hljs-attribute">height</span>:<span class="hljs-number">40px</span>;
        <span class="hljs-attribute">line-height</span>: <span class="hljs-number">40px</span>;
        <span class="hljs-attribute">text-align</span>:center;
        <span class="hljs-attribute">font-size</span>:<span class="hljs-number">16px</span>;
        <span class="hljs-attribute">border-radius</span>:<span class="hljs-number">5px</span>;
    }
}
</code></pre>
<h2 id="t8414. &#x5B9E;&#x73B0;&#x4F1A;&#x8BDD;">14. &#x5B9E;&#x73B0;&#x4F1A;&#x8BDD; <a href="#t8414. &#x5B9E;&#x73B0;&#x4F1A;&#x8BDD;"> # </a></h2>
<h3 id="t8514.1 server/app.js">14.1 server/app.js <a href="#t8514.1 server/app.js"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> express=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;express&apos;</span>);
<span class="hljs-keyword">let</span> bodyParser = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;body-parser&apos;</span>);
<span class="hljs-keyword">let</span> session=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;express-session&apos;</span>);
<span class="hljs-keyword">let</span> app=express();
app.use(bodyParser.json());
app.use(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req,res,next</span>) </span>{
    res.header(<span class="hljs-string">&apos;Access-Control-Allow-Methods&apos;</span>,<span class="hljs-string">&apos;PUT,POST,GET,DELETE,OPTIONS&apos;</span>);
    res.header(<span class="hljs-string">&apos;Access-Control-Allow-Headers&apos;</span>,<span class="hljs-string">&apos;Content-Type&apos;</span>);
    res.header(<span class="hljs-string">&apos;Access-Control-Allow-Origin&apos;</span>,<span class="hljs-string">&apos;http://localhost:8080&apos;</span>);
    res.header(<span class="hljs-string">&apos;Access-Control-Allow-Credentials&apos;</span>,<span class="hljs-string">&apos;true&apos;</span>);
    <span class="hljs-keyword">if</span> (req.method === <span class="hljs-string">&apos;OPTIONS&apos;</span>) {
        <span class="hljs-keyword">return</span> res.sendStatus(<span class="hljs-number">200</span>);
    }
    next();
});
app.use(session({
    <span class="hljs-attr">resave</span>:<span class="hljs-literal">true</span>,
    <span class="hljs-attr">secret</span>:<span class="hljs-string">&apos;zfpx&apos;</span>,
    <span class="hljs-attr">saveUninitialized</span>:<span class="hljs-literal">true</span>
}));
app.listen(<span class="hljs-number">3000</span>);
<span class="hljs-keyword">let</span> sliders=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./mock/sliders&apos;</span>);
app.get(<span class="hljs-string">&apos;/sliders&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req,res</span>) </span>{
    res.json(sliders);
});
<span class="hljs-keyword">let</span> lessons = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./mock/lessons&apos;</span>);
<span class="hljs-comment">// http://getLessons/vue?offset=0&amp;limit=5</span>
app.get(<span class="hljs-string">&apos;/getLessons/:category&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req,res</span>)</span>{
   <span class="hljs-keyword">let</span> category = req.params.category;
   <span class="hljs-keyword">let</span> {offset,limit} = req.query;
   offset = <span class="hljs-built_in">isNaN</span>(offset)?<span class="hljs-number">0</span>:<span class="hljs-built_in">parseInt</span>(offset);<span class="hljs-comment">//&#x504F;&#x79FB;&#x91CF; </span>
   limit = <span class="hljs-built_in">isNaN</span>(limit)?<span class="hljs-number">5</span>:<span class="hljs-built_in">parseInt</span>(limit); <span class="hljs-comment">//&#x6BCF;&#x9875;&#x6761;&#x6570;</span>
   <span class="hljs-keyword">let</span> list = <span class="hljs-built_in">JSON</span>.parse(<span class="hljs-built_in">JSON</span>.stringify(lessons));
   <span class="hljs-keyword">if</span>(category!=<span class="hljs-string">&apos;all&apos;</span>){
     list = list.filter(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span>item.category==category);
   }
   <span class="hljs-keyword">let</span> total = list.length;
   <span class="hljs-comment">//&#x5206;&#x9875;&#x6570;&#x636E;</span>
   list = list.slice(offset,offset+limit);
   <span class="hljs-comment">//list.forEach(item=&gt;item.title= item.title+Math.random());</span>
   setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    res.json({
        list,
        <span class="hljs-attr">hasMore</span>:total&gt;offset+limit
    });
   },<span class="hljs-number">1000</span>);
});

<span class="hljs-comment">// 30 6&#x6B21; 5&#x6761; 30 offset=30 </span>
<span class="hljs-keyword">let</span> users = [];
app.post(<span class="hljs-string">&apos;/api/reg&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req,res</span>)</span>{
   <span class="hljs-keyword">let</span> body = req.body;
   users.push(body);
    res.json({
       <span class="hljs-attr">code</span>:<span class="hljs-number">0</span>,
       <span class="hljs-attr">success</span>:<span class="hljs-string">&apos;&#x6CE8;&#x518C;&#x6210;&#x529F;&apos;</span>
   })
});
<span class="hljs-comment">//user username password</span>
app.post(<span class="hljs-string">&apos;/api/login&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req,res</span>)</span>{
    <span class="hljs-keyword">let</span> body = req.body;<span class="hljs-comment">//{username,password}</span>
    <span class="hljs-keyword">let</span> user = users.find(<span class="hljs-function"><span class="hljs-params">item</span>=&gt;</span>item.username == body.username &amp;&amp; item.password == body.password);
    <span class="hljs-keyword">if</span>(user){
        req.session.user = user;
        res.json({
            user,
            <span class="hljs-attr">code</span>:<span class="hljs-number">0</span>,
            <span class="hljs-attr">success</span>:<span class="hljs-string">&apos;&#x767B;&#x5F55;&#x6210;&#x529F;&apos;</span>
        });
    }<span class="hljs-keyword">else</span>{
        res.json({
            <span class="hljs-attr">code</span>:<span class="hljs-number">1</span>,
            <span class="hljs-attr">error</span>:<span class="hljs-string">&apos;&#x767B;&#x5F55;&#x5931;&#x8D25;&apos;</span>
        });
    }
});
app.get(<span class="hljs-string">&apos;/api/validate&apos;</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">req,res</span>)</span>{
  <span class="hljs-keyword">let</span> user = req.session.user;
  <span class="hljs-keyword">if</span>(user){
    res.json({
        <span class="hljs-attr">code</span>:<span class="hljs-number">0</span>,
        <span class="hljs-attr">success</span>:<span class="hljs-string">&apos;&#x6B64;&#x7528;&#x6237;&#x5DF2;&#x7ECF;&#x767B;&#x5F55;&apos;</span>,
        user
    });
  }<span class="hljs-keyword">else</span>{
      res.json({
        <span class="hljs-attr">code</span>:<span class="hljs-number">1</span>,
        <span class="hljs-attr">error</span>:<span class="hljs-string">&apos;&#x6B64;&#x7528;&#x6237;&#x672A;&#x767B;&#x5F55;&apos;</span>,
    });
  }
});

</code></pre>
<h3 id="t8614.2 src/api/index.tsx">14.2 src/api/index.tsx <a href="#t8614.2 src/api/index.tsx"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> API_HOST=<span class="hljs-string">&apos;http://localhost:3000&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> get=<span class="hljs-function">(<span class="hljs-params">url:string</span>) =&gt;</span> {
    <span class="hljs-keyword">return</span> fetch(API_HOST+url,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;GET&apos;</span>,
        <span class="hljs-attr">credentials</span>: <span class="hljs-string">&apos;include&apos;</span>,<span class="hljs-comment">//&#x8DE8;&#x57DF;&#x643A;&#x5E26;cookie</span>
        headers: {
            <span class="hljs-attr">accept</span>:<span class="hljs-string">&apos;application/json&apos;</span>
        }
    }).then(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>res.json());
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> post=<span class="hljs-function">(<span class="hljs-params">url:string,data:object</span>) =&gt;</span> {
    <span class="hljs-keyword">return</span> fetch(API_HOST+url,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;POST&apos;</span>,
        <span class="hljs-attr">body</span>: <span class="hljs-built_in">JSON</span>.stringify(data),
        <span class="hljs-attr">headers</span>: {
            <span class="hljs-string">&apos;Content-Type&apos;</span>: <span class="hljs-string">&apos;application/json&apos;</span>,
            <span class="hljs-string">&apos;Accept&apos;</span>:<span class="hljs-string">&apos;application/json&apos;</span>
        }
    }).then(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>res.json());
}
</code></pre>
<h3 id="t8714.3 Login/index.tsx">14.3 Login/index.tsx <a href="#t8714.3 Login/index.tsx"> # </a></h3>
<p>src/containers/Login/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>
<span class="hljs-keyword">import</span> {Link} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router-dom&apos;</span>;
<span class="hljs-keyword">import</span> NavHeader <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../components/NavHeader&apos;</span>;
<span class="hljs-keyword">import</span> { connect } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-redux&apos;</span>;
<span class="hljs-keyword">import</span> { Store } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../store/types&apos;</span>;
<span class="hljs-keyword">import</span> actions <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../store/actions/session&apos;</span>;
declare <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">require</span>(<span class="hljs-params">url: string</span>): <span class="hljs-title">string</span>;
<span class="hljs-title">let</span> <span class="hljs-title">profile</span>=<span class="hljs-title">require</span>(<span class="hljs-params"><span class="hljs-string">&apos;../../images/profile.png&apos;</span></span>);
<span class="hljs-title">interface</span> <span class="hljs-title">Props</span></span>{
    history: any,
    <span class="hljs-attr">login</span>:any
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Login</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt;</span>{
    username:any
    password:any
    handleLogin = <span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>{
        <span class="hljs-keyword">let</span> username = <span class="hljs-keyword">this</span>.username.value;
        <span class="hljs-keyword">let</span> password = <span class="hljs-keyword">this</span>.password.value;
        <span class="hljs-keyword">this</span>.props.login({username,password});
    }
    render() {
        <span class="hljs-keyword">return</span> (
            &lt;div className=&quot;login-panel&quot;&gt;
                &lt;NavHeader title=&quot;&#x767B;&#x5F55;&quot; history={this.props.history} /&gt;
                &lt;div className=&quot;login-logo&quot;&gt;
                  &lt;img  src={profile} /&gt;
                &lt;/div&gt;
                &lt;input ref={input=&gt;this.username=input} type=&quot;text&quot; placeholder=&quot;&#x624B;&#x673A;&#x53F7;&quot; /&gt;
                &lt;input ref={input=&gt;this.password=input} type=&quot;text&quot; placeholder=&quot;&#x5BC6;&#x7801;&quot; /&gt;
                &lt;Link to=&quot;/reg&quot;&gt;&#x524D;&#x5F80;&#x6CE8;&#x518C;&lt;/Link&gt;
                &lt;button onClick={this.handleLogin}&gt;&#x767B;&amp;nbsp;&#x5F55;&lt;/button&gt;
            &lt;/div&gt;
        )
    }
}

export default connect(
    (state:Store)=&gt;state.session,actions
)(Login);
</code></pre>
<h3 id="t8814.4 Profile/index.tsx">14.4 Profile/index.tsx <a href="#t8814.4 Profile/index.tsx"> # </a></h3>
<p>src/containers/Profile/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>
<span class="hljs-keyword">import</span> { Link } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router-dom&apos;</span>;
<span class="hljs-keyword">import</span> { Store } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../store/types&apos;</span>;
<span class="hljs-keyword">import</span> { connect } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-redux&apos;</span>;
<span class="hljs-keyword">import</span> actions <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../store/actions/session&apos;</span>;
declare <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">require</span>(<span class="hljs-params">url: string</span>): <span class="hljs-title">string</span>;
<span class="hljs-title">let</span> <span class="hljs-title">profile</span>=<span class="hljs-title">require</span>(<span class="hljs-params"><span class="hljs-string">&apos;../../images/profile.png&apos;</span></span>);
<span class="hljs-title">interface</span> <span class="hljs-title">Props</span></span>{
    user:any
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Profile</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt;</span>{
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;profile&quot;</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;profile-bg&quot;</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{profile}/</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;login-btn&quot;</span>&gt;</span>
                    {this.props.user?this.props.user.username:<span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/login&quot;</span>&gt;</span>&#x767B;&#x5F55;<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span>}
                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        )
    }
}
export default connect(
    (state:Store)=&gt;state.session,actions
)(Profile);
</span></code></pre>
<h3 id="t8914.5 Reg/index.tsx">14.5 Reg/index.tsx <a href="#t8914.5 Reg/index.tsx"> # </a></h3>
<p> src/containers/Reg/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> <span class="hljs-string">&apos;./index.less&apos;</span>
<span class="hljs-keyword">import</span> {Link} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router-dom&apos;</span>;
<span class="hljs-keyword">import</span> NavHeader <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../components/NavHeader&apos;</span>;
<span class="hljs-keyword">import</span> { connect } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-redux&apos;</span>;
<span class="hljs-keyword">import</span> { Store } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../store/types&apos;</span>;
<span class="hljs-keyword">import</span> actions <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../store/actions/session&apos;</span>;
declare <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">require</span>(<span class="hljs-params">url: string</span>): <span class="hljs-title">string</span>;
<span class="hljs-title">let</span> <span class="hljs-title">profile</span>=<span class="hljs-title">require</span>(<span class="hljs-params"><span class="hljs-string">&apos;../../images/profile.png&apos;</span></span>);
<span class="hljs-title">interface</span> <span class="hljs-title">Props</span></span>{
    history: any,
    <span class="hljs-attr">reg</span>:any
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Login</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt;</span>{
    username: any
    password: any
    handleReg = <span class="hljs-function"><span class="hljs-params">()</span>=&gt;</span>{
        <span class="hljs-keyword">let</span> username = <span class="hljs-keyword">this</span>.username.value;
        <span class="hljs-keyword">let</span> password = <span class="hljs-keyword">this</span>.password.value;
        <span class="hljs-keyword">this</span>.props.reg({username,password});
    }
    render() {
        <span class="hljs-keyword">return</span> (
            &lt;div className=&quot;login-panel&quot;&gt;
                &lt;NavHeader title=&quot;&#x6CE8;&#x518C;&quot; history={this.props.history}/&gt;
                &lt;div className=&quot;login-logo&quot;&gt;
                  &lt;img  src={profile} /&gt;
                &lt;/div&gt;
                &lt;input ref={input=&gt;this.username=input}  type=&quot;text&quot; placeholder=&quot;&#x624B;&#x673A;&#x53F7;&quot; /&gt;
                &lt;input ref={input=&gt;this.password=input} type=&quot;text&quot; placeholder=&quot;&#x5BC6;&#x7801;&quot; /&gt;
                &lt;Link to=&quot;/login&quot;&gt;&#x524D;&#x5F80;&#x767B;&#x5F55;&lt;/Link&gt;
                &lt;button   onClick={this.handleReg} &gt;&#x6CE8;&amp;nbsp;&#x518C;&lt;/button&gt;
            &lt;/div&gt;
        )
    }
}

export default connect(
    (state:Store)=&gt;state.session,actions
)(Login);
</code></pre>
<h3 id="t9014.6 action-types.tsx">14.6 action-types.tsx <a href="#t9014.6 action-types.tsx"> # </a></h3>
<p>src/store/action-types.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> SET_CURRENT_CATEGORY=<span class="hljs-string">&apos;SET_CURRENT_CATEGORY&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> SET_HOME_SLIDERS=<span class="hljs-string">&apos;SET_HOME_SLIDERS&apos;</span>;

<span class="hljs-comment">//&#x5F00;&#x59CB;&#x52A0;&#x8F7D;&#x4E0B;&#x4E00;&#x9875;&#x7684;&#x6570;&#x636E;</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> SET_HOME_LESSONS_LOADING=<span class="hljs-string">&apos;SET_HOME_LESSONS_LOADING&apos;</span>;
<span class="hljs-comment">//&#x8FFD;&#x52A0;&#x4E00;&#x9875;&#x6570;&#x636E;</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> ADD_HOME_LESSONS=<span class="hljs-string">&apos;ADD_HOME_LESSONS&apos;</span>;
<span class="hljs-comment">//&#x91CD;&#x7F6E;&#x8BFE;&#x7A0B;&#x5217;&#x8868;&#x5F00;&#x59CB;</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> REFRESH_HOME_LESSONS_LOADING=<span class="hljs-string">&apos;REFRESH_HOME_LESSONS_LOADING&apos;</span>;
<span class="hljs-comment">//&#x91CD;&#x7F6E;&#x8BFE;&#x7A0B;&#x5217;&#x8868;</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> REFRESH_HOME_LESSONS=<span class="hljs-string">&apos;REFRESH_HOME_LESSONS&apos;</span>;


<span class="hljs-comment">//&#x6CE8;&#x518C;</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> REG = <span class="hljs-string">&apos;REG&apos;</span>;
<span class="hljs-comment">//&#x767B;&#x5F55;</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> LOGIN = <span class="hljs-string">&apos;LOGIN&apos;</span>;
<span class="hljs-comment">//&#x9000;&#x51FA;</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> LOGOUT = <span class="hljs-string">&apos;LOGOUT&apos;</span>;

<span class="hljs-comment">//&#x6E05;&#x7A7A;&#x6D88;&#x606F;</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> CLEAR_MESSAGES = <span class="hljs-string">&apos;CLEAR_MESSAGES&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> VALIDATE = <span class="hljs-string">&apos;VALIDATE&apos;</span>;

</code></pre>
<h3 id="t9114.7 reducers/index.tsx">14.7 reducers/index.tsx <a href="#t9114.7 reducers/index.tsx"> # </a></h3>
<p>src/store/reducers/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { combineReducers } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;redux&apos;</span>;
<span class="hljs-keyword">import</span> history <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../history&apos;</span>;
<span class="hljs-keyword">import</span> home <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./home&apos;</span>;
<span class="hljs-keyword">import</span> session <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./session&apos;</span>;
<span class="hljs-keyword">import</span> { connectRouter } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;connected-react-router&apos;</span>
<span class="hljs-keyword">let</span> reducers=combineReducers({
    home,
    session,
    <span class="hljs-attr">router</span>: connectRouter(history)
});
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> reducers;
</code></pre>
<h3 id="t9214.8 types/index.tsx">14.8 types/index.tsx <a href="#t9214.8 types/index.tsx"> # </a></h3>
<p>src/store/types/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">export</span> interface Store{
    <span class="hljs-attr">home</span>: Home,
    <span class="hljs-attr">session</span>:Session
}
<span class="hljs-keyword">export</span> interface Home{
    <span class="hljs-attr">currentCategory</span>: string,
    <span class="hljs-attr">sliders</span>: string[],
    <span class="hljs-attr">lessons</span>:any
}
<span class="hljs-keyword">export</span> interface Session{
    user?: any,
    <span class="hljs-attr">error</span>: any,
    <span class="hljs-attr">success</span>:any
}

<span class="hljs-keyword">export</span> interface Props{
    children?: any,
}
</code></pre>
<h3 id="t9314.9 api/session.tsx">14.9 api/session.tsx <a href="#t9314.9 api/session.tsx"> # </a></h3>
<p>src/api/session.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> {get,post} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./index&apos;</span>;
<span class="hljs-comment">//&#x6CE8;&#x518C;</span>
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">reg</span>(<span class="hljs-params">user:any</span>)</span>{
  <span class="hljs-keyword">return</span> post(<span class="hljs-string">&apos;/api/reg&apos;</span>,user);<span class="hljs-comment">//{username,password}</span>
}
<span class="hljs-comment">//&#x767B;&#x5F55;</span>
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">login</span>(<span class="hljs-params">user:any</span>)</span>{
  <span class="hljs-keyword">return</span> post(<span class="hljs-string">&apos;/api/login&apos;</span>,user);<span class="hljs-comment">//{username,password}</span>
}
<span class="hljs-comment">//&#x9000;&#x51FA;</span>
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">logout</span>(<span class="hljs-params"></span>)</span>{
  <span class="hljs-keyword">return</span> get(<span class="hljs-string">&apos;/api/logout&apos;</span>);
}

<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">validate</span>(<span class="hljs-params"></span>)</span>{
  <span class="hljs-keyword">return</span> get(<span class="hljs-string">&apos;/api/validate&apos;</span>);
}
</code></pre>
<h3 id="t9414.10 actions/session.tsx">14.10 actions/session.tsx <a href="#t9414.10 actions/session.tsx"> # </a></h3>
<p>src/store/actions/session.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> types <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../action-types&apos;</span>;
<span class="hljs-keyword">import</span> { reg,login,logout,validate } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../api/session&apos;</span>;
<span class="hljs-keyword">import</span> {push} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;connected-react-router&apos;</span>;
<span class="hljs-keyword">export</span> type Action=any;
interface Res{
    <span class="hljs-attr">code</span>:any,<span class="hljs-attr">success</span>:any,<span class="hljs-attr">error</span>:any
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    reg(user:any) {
        <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">dispatch:any,getState:any</span>) </span>{
            reg(user).then(<span class="hljs-function">(<span class="hljs-params">result</span>) =&gt;</span> {
                <span class="hljs-keyword">let</span> { code,success,error }=result;
                dispatch({
                    <span class="hljs-attr">type</span>: types.REG,
                    <span class="hljs-attr">payload</span>: { success,error }
                });
                <span class="hljs-keyword">if</span> (code==<span class="hljs-number">0</span>) {<span class="hljs-comment">//code=0&#x8868;&#x793A;&#x6210;&#x529F; &#x6210;&#x529F;&#x540E;&#x8DF3;&#x5230;&#x767B;&#x5F55;&#x9875;</span>
                    dispatch(push(<span class="hljs-string">&apos;/login&apos;</span>));
                }
            })
        }
    },
    login(user:any) {
        <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">dispatch:any,getState:any</span>) </span>{
            login(user).then(<span class="hljs-function"><span class="hljs-params">result</span> =&gt;</span> {
                <span class="hljs-keyword">let</span> { code,success,error,user }=result;
                dispatch({
                    <span class="hljs-attr">type</span>: types.LOGIN,
                    <span class="hljs-attr">payload</span>: { success,error,user }
                });
                <span class="hljs-keyword">if</span> (code==<span class="hljs-number">0</span>) {
                    dispatch(push(<span class="hljs-string">&apos;/profile&apos;</span>));
                }
            })
        }
    },
    logout() {
        <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">dispatch:any,getState:any</span>) </span>{
            logout().then(<span class="hljs-function"><span class="hljs-params">result</span> =&gt;</span> {
                <span class="hljs-keyword">let</span> { code,success,error }=result;
                dispatch({
                    <span class="hljs-attr">type</span>: types.LOGOUT,
                    <span class="hljs-attr">payload</span>: { success,error }
                });
                dispatch(push(<span class="hljs-string">&apos;/login&apos;</span>));
            });
        }
    },
    clearMessages() {
        <span class="hljs-keyword">return</span> {
            <span class="hljs-attr">type</span>: types.CLEAR_MESSAGES
        }
    },
    validate() {
        <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">dispatch:any,getState:any</span>) </span>{
            validate().then(<span class="hljs-function"><span class="hljs-params">result</span> =&gt;</span> {
                <span class="hljs-keyword">let</span> { code,success,error,user }=result;
                dispatch({
                    <span class="hljs-attr">type</span>: types.VALIDATE,
                    <span class="hljs-attr">payload</span>: { success,error,user }
                });
            });
        }
    }
}

</code></pre>
<h3 id="t9514.11 reducers/session.tsx">14.11 reducers/session.tsx <a href="#t9514.11 reducers/session.tsx"> # </a></h3>
<p>src/store/reducers/session.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> types <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../action-types&apos;</span>;
<span class="hljs-keyword">import</span> { Session } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../types&apos;</span>;

<span class="hljs-keyword">let</span> initState = {
  <span class="hljs-attr">error</span>: <span class="hljs-string">&apos;&apos;</span>,<span class="hljs-comment">//&#x9519;&#x8BEF;&#x6D88;&#x606F;</span>
  success: <span class="hljs-string">&apos;&apos;</span>,<span class="hljs-comment">//&#x6210;&#x529F;&#x6D88;&#x606F;</span>
  <span class="hljs-comment">//&#x5982;&#x679C;&#x767B;&#x5F55;&#x6210;&#x529F;&#x7684;&#x8BDD;&#xFF0C;&#x9700;&#x8981;&#x7ED9;&#x6B64;&#x5C5E;&#x6027;&#x8D4B;&#x503C;&#x4E3A;&#x767B;&#x5F55;&#x7528;&#x6237;</span>
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">state:Session = initState, action:any</span>) </span>{
  <span class="hljs-keyword">switch</span> (action.type) {
    <span class="hljs-keyword">case</span> types.REG:<span class="hljs-comment">///&#x6CE8;&#x518C;&#x65B9;&#x6CD5;&#x8C03;&#x7528;&#x5B8C;&#x6210;&#x540E;</span>
      <span class="hljs-comment">//&#x4E0D;&#x9700;&#x8981;&#x89E3;&#x6784;&#x8001;&#x72B6;&#x6001;</span>
     <span class="hljs-keyword">return</span> {
       ...action.payload
    };
    <span class="hljs-keyword">case</span> types.LOGIN:<span class="hljs-comment">///&#x6CE8;&#x518C;&#x65B9;&#x6CD5;&#x8C03;&#x7528;&#x5B8C;&#x6210;&#x540E;</span>
      <span class="hljs-keyword">return</span> {
        ...action.payload
      };
    <span class="hljs-keyword">case</span> types.LOGOUT:<span class="hljs-comment">///&#x9000;&#x51FA;&#x65B9;&#x6CD5;&#x8C03;&#x7528;&#x5B8C;&#x6210;&#x540E;</span>
      <span class="hljs-keyword">return</span> {
        ...action.payload
      };
    <span class="hljs-keyword">case</span> types.CLEAR_MESSAGES:
      <span class="hljs-keyword">return</span> {
        ...state,
        <span class="hljs-attr">error</span>: <span class="hljs-string">&apos;&apos;</span>,
        <span class="hljs-attr">success</span>:<span class="hljs-string">&apos;&apos;</span>
      };
    <span class="hljs-keyword">case</span> types.VALIDATE:
      <span class="hljs-keyword">return</span> {
        ...state,
        ...action.payload
      };
    <span class="hljs-keyword">default</span>:
      <span class="hljs-keyword">return</span> state;
  }
}
</code></pre>
<h2 id="t9615. &#x53D7;&#x4FDD;&#x62A4;&#x8DEF;&#x7531;">15. &#x53D7;&#x4FDD;&#x62A4;&#x8DEF;&#x7531; <a href="#t9615. &#x53D7;&#x4FDD;&#x62A4;&#x8DEF;&#x7531;"> # </a></h2>
<h3 id="t9715.1 PrivateRoute/index.tsx">15.1 PrivateRoute/index.tsx <a href="#t9715.1 PrivateRoute/index.tsx"> # </a></h3>
<p>src/containers/PrivateRoute/index.tsx</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {Route,Redirect} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router-dom&apos;</span>;
<span class="hljs-keyword">import</span> { connect } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-redux&apos;</span>;
<span class="hljs-keyword">import</span> { Store } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../../store/types&apos;</span>;
interface Props{
    <span class="hljs-attr">path</span>: any,
    <span class="hljs-attr">component</span>: any,
    <span class="hljs-attr">user</span>:any
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PrivateRoute</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>&lt;<span class="hljs-title">Props</span>&gt; </span>{
    render() {
        <span class="hljs-keyword">let</span> { path,<span class="hljs-attr">component</span>: Comp,user }=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;user&apos;</span>,user)
        <span class="hljs-keyword">if</span>(user){
            <span class="hljs-keyword">return</span> &lt;Route path={path} render={(props) =&gt; user? &lt;Comp {...props} /&gt;:&lt;Redirect to=&quot;/login&quot; /&gt;} /&gt;;
        }else{
            return &lt;Redirect to=&quot;/login&quot;/&gt;;
        }
    }
}
export default connect(
    (state:Store) =&gt; state.session
)(PrivateRoute)
</code></pre>
<h3 id="t9815.2 src/index.tsx">15.2 src/index.tsx <a href="#t9815.2 src/index.tsx"> # </a></h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> PrivateRoute <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./containers/PrivateRoute&apos;</span>;
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">PrivateRoute</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/profile&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{Profile}</span> /&gt;</span>
</span></code></pre>
<h2 id="t99&#x53C2;&#x8003;">&#x53C2;&#x8003; <a href="#t99&#x53C2;&#x8003;"> # </a></h2>
<ul>
<li><a href="https://gitee.com/zhufengpeixun/typescript-ketang.git">typescript-ketang</a></li>
</ul>

        <div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
    </div>
    
</div>

<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script>
$('.warpper .page-toc ul ul li a').on('click',function(){
  $('.warpper .page-toc ul ul li a').removeClass('my-active')
  $(this).addClass('my-active')
})
  // if (!$('.understand-me').length) {
  //   var bar = $(window).height() - $('.navbar ').height() - $('.page-toc').position().top;
  //   var count = bar / 26 / 2;
  //   var barHeight = $('.page-toc').outerHeight();
  //   $('.page-toc li').eq(0).children('a').addClass('red');
  //   var arr = [];
  //   $("h1,h2,h3,h4,h5,h6").each(function () {
  //     arr.push($(this).position().top);
  //   });
  //   var timer
  //   function dark() {
  //     clearTimeout(timer)
  //      timer = setTimeout(function () {
  //      var top = Math.abs($('.page-toc > ul').position().top);
  //      var cur = $('.content').scrollTop();
  //      for (var i = arr.length; i >= 0; i--) {
  //        if (arr[i] <= cur) {
  //          break;
  //        }
  //      }
  //      if (i === -1) {
  //        i = 0;
  //      }
  //      $('.page-toc li a').removeClass('red');
  //      $('.page-toc li').eq(i).children('a').addClass('red');
  //      let height = $('.page-toc li').eq(i).position().top-$('.page-toc').height(); // 如果当前的offset出去了 回到中间可好？
  //      $('.page-toc').scrollTop(height+$('.page-toc').height()/2);
  //    },200)
  //   }

  //   $('.content').on('scroll', dark);
  // }
</script>
<style>

    /* ::-webkit-scrollbar{width:14px;}
    ::-webkit-scrollbar-track{background-color:transparent;}
    ::-webkit-scrollbar-thumb{background-color:transparent;}
    ::-webkit-scrollbar-thumb:hover {background-color:transparent}
    ::-webkit-scrollbar-thumb:active {background-color:transparent} */

    .page-toc > ul .red {
        background: #f3f3f3;
        z-index: 1;
        border-left: 3px solid #009a61;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        color: #000
    }





</style>
</body>
</html>
